Arbeiten mit dynamisch generierten Kinder

Question

jsfiddle

var model = ["abc","b","c"]; 

var RawEditableField = React.createClass({ 
    propTypes: { 
    value: React.PropTypes.string.isRequired, 
    changeEvent: React.PropTypes.func.isRequired, 
    }, 

    render: function() { 
    return (
     <div>  
      <input type="text" value={this.props.value} onChange={this.props.changeEvent}/> 
     </div> 
    ); 
    } 
}); 


var Hello = React.createClass({ 
    createFields(){ 
    var jsxResult = model.map(this.createField, this); 
    return jsxResult; 
    }, 

    handleValueChange(e){ 
    var inputValue = e.nativeEvent.target.value; 
    console.log('handleValueChange', inputValue); 
    console.log('handleValueChange', e.nativeEvent.target); 
    console.log('handleValueChange', e.currentTarget); 
    console.log('handleValueChange', e); 
    console.log('handleValueChange', e._targetInst); 
    //this.refs.a.props.value = inputValue;//tried hard coding value is readonly 
    console.log('refs: ', this.refs); 
    //e.nativeEvent.target.value = inputValue; 
    }, 

    handleSave(){ 
    console.log('gather state of all fields'); 
    }, 

    createField(data){ 
    //console.log('createField data:', data); 
    return <RawEditableField key={data} value={data} changeEvent={this.handleValueChange} ref={data} />; 
    }, 

    render: function() { 
    var fieldJsx = this.createFields(); 
    return <div>      
      {fieldJsx} 
      <input type="submit" onClick={this.handleSave} value="Submit" /> 
      </div>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

ich den Zustand der dynamisch generierten Kinder verfolgen möchten. Ich weiß nicht, wie ich das Problem angehen soll. Sehen Sie die Geige für ein funktionierendes Beispiel. Ich habe N # Eingänge:

<input type="text" key={this.props.keyName} value={this.props.value} onChange={this.props.changeEvent}/> 

Wie kann ich den Status jedes einzelnen verfolgen? Muss ich dem übergeordneten Objekt dynamisch einen Status hinzufügen, und wenn ja wie?

Answer 1

Um den Zustand der Kinder verfolgen es zu jedem einen ref hinzufügen und greifen aus: this.refs

<input type="text" ref={this.props.keyName} key={this.props.keyName} value={this.props.value} onChange={this.props.changeEvent}/> 

Sie, dass die Eingabe in einer übergeordneten Komponente unter Verwendung this.refs.keyname ersetzt den aktuellen Wert von keyname natürlich jetzt greifen .

Hier sind die React docs auf Refs