reactjs bekomme Auswahlwerte - immer undefined

Question

Ich bin ziemlich neu zu reactjs, also schrieb ich eine ziemlich einfache Seite, um eine 'dynamische' <select> Optionen zu testen und wie man den ausgewählten Wert bekommt. Was ich tun wollte, war auf submit, in der Lage sein, die ausgewählten Werte durch Iterieren durch die this.refs zu erhalten, aber ich bekomme undefinierte Werte. Ich bin mir nicht sicher, wie man es mit dem Griffwechsel kontrolliert machen kann, also entschied ich mich für den unkontrollierten Ansatz. Allerdings würde ich gerne wissen, wie man beides macht. Oder gibt es einen besseren Weg, um die ausgewählten Werte auf dem Formular zu erhalten?

Auch in der Wiedergabe der Auswahl, warum kann ich nicht eine ref={this.props.formId} dort anstelle der Optionsliste hinzufügen? Wenn ich das Ref auf OptionsList entferne und es in der Auswahl habe, dann erkennt es keine Auswahleingaben.

var data1 = [ 
    { Id: 1, Name: "Option 1", Value: "Value 1" }, 
    { Id: 2, Name: "Option 2", Value: "Value 2" }, 
    { Id: 3, Name: "Option 3", Value: "Value 3" } 
]; 

var data2 = [ 
    { Id: 4, Name: "Option 4", Value: "Value 4" }, 
    { Id: 5, Name: "Option 5", Value: "Value 5" }, 
    { Id: 6, Name: "Option 6", Value: "Value 6" } 
]; 

var FormOptionList = React.createClass({ 
    handleSubmit: function (e) { 
     e.preventDefault(); 

     for (var ref in this.refs) { 
      console.log(this.refs[ref].value); 
     } 

     return; 
    }, 
    render: function() { 
     return (
      <div className="formList"> 
       <form onSubmit={this.handleSubmit}> 
        <div> 
        <OptionsList key="ListA" formId="ListA" options={this.props.data1} ref="ListA" /> 
        <br /> 
        <OptionsList key="ListB" formId="ListB" options={this.props.data2} ref="ListB" /> 
        </div> 
        <input type="submit" value="Post" /> 
       </form> 
      </div> 
    ); 
    } 
}); 

var OptionsList = React.createClass({ 
    //getInitialState: function() { 
    // return { 
    //  options: [], 
    //  selectValue: 'Option 1' 
    // }; 
    //}, 
    //handleChange: function(e) { 
    // this.setState({ selectValue: e.target.value }) 
    //}, 
    getInitialState: function() { 
     return { 
      options: [] 
     }; 
    }, 
    render: function() { 
     var optionsList = this.props.options.map(function (option) { 
      return (
       <option key={option.Id} value={option.Value}>{option.Name}</option> 
      ) 
     }); 
     return (
      <select> 
       {optionsList} 
      </select> 
     ); 
    } 
}); 

ReactDOM.render(
    <FormOptionList data1={data1} data2={data2} />, 
    document.getElementById('content') 
); 

Answer 1

Mit Refs macht, ist nicht der beste Weg zu erreichen, was Sie wollen.

wäre ein guter Weg

sein

1º eine Methode in der übergeordneten Komponente Fügen Sie die Werte Ihrer <OptionList> Komponenten

handleSelectChange(select,value){ 
    this.setState({[select] : value}) 
} 

2e Pass handleSelectChange zu <OptionList> als Stütze

<OptionsList key="ListA" 
    formId="ListA" options={this.props.data1} 
    onChange={this.handleSelectChange} /> 

zu speichern

3º Übergeben Sie den Wert <select> an die übergeordnete Komponente mithandleSelectChange

var OptionsList = React.createClass({ 
    render: function() { 
     var optionsList = this.props.options.map((option) => { 
      return (
       <option key={option.Id} value={option.Value}>{option.Name}</option> 
      ) 
     }); 
     return (
      <select onChange={(e) => this.props.onChange(this.props.formId,e.target.value)}> 
       {optionsList} 
      </select> 
     ); 
    } 
}); 

full working example

Answer 2

Der Grund, warum Sie undefineds sind immer ist, weil, was Sie haben OptionsList in Ihrem refs Instanzen Ihrer benutzerdefinierten Komponente sind, nicht DOM-Elemente. Das gilt im Allgemeinen in React, wenn Sie eine Referenz auf ein DOM-Element (<div ref="myDiv" />) setzen, dann this.refs.myDiv erhalten Sie das tatsächliche physische DOM-Element für diese div. Umgekehrt, wenn Sie eine ref auf eine benutzerdefinierte Komponente setzen, wie Sie, dann enthält die ref eine Instanz dieser Komponente. OptionsList hat keine Methode oder Eigenschaft namens value, daher die undefineds. Dies sollte auch Ihre zweite Frage beantworten - jede Komponente hat ihre eigene refs - wenn Sie eine ref auf die select in OptionsList setzen, wird es nur innerhalb OptionsList zugänglich sein.

Um dies funktionieren zu lassen, müssen Sie einige API auf OptionsList verfügbar machen, um den Wert zu erhalten, und verwenden Sie dann, z.

{ 
    ... 
    render(){ 
    return (
      ... 
      <select ref='select'> 
       {optionsList} 
      </select> 
     ); 
}, 

    getValue(){ return this.refs.select.value; } 
} 

Und dann in FormOptionList: console.log(this.refs[ref].getValue());

tun dies in einer kontrollierten Art beinhalten würde, die eine value und onChange Stütze auf der OptionsList - Sie würde mehr oder weniger nur diejenigen, an die select passieren. Dann in FormOptionList (oder in einem seiner Vorfahren), müssten Sie einen Zustand mit dem value haben und OptionsList 's value und onChange verwenden, um diesen Wert synchron mit dem select zu halten.

Hoffnung, den Sinn :-)