Wie Kinder Zustand Zugriff in Reaktion?

Question

Ich habe die folgende Struktur:

FormEditor - hält mehr FieldEditor FieldEditor - bearbeitet ein Feld der Form und verschiedene Werte über sie zu speichern darin Zustand ist

Wenn eine Taste innerhalb FormEditor geklickt wird, mag ich der Lage sein, Informationen über die Felder von allen FieldEditor Komponenten zu sammeln, Informationen, die in ihrem Zustand ist, und das alles innerhalb FormEditor haben.

Ich überlegte, die Informationen über die Felder außerhalb von FieldEditor 's Zustand zu speichern und es in FormEditor' s Zustand stattdessen zu setzen. das würde FormEditor erfordern jedoch zu jedem der es FieldEditor Komponenten zu hören, wie sie und ihre Informationen ändern darin Zustand.

kann ich nicht auf nur die anstelle Zustand der Kinder? Ist es ideal?

Answer 1

Wenn Sie bereits onChange-Handler für die einzelnen FieldEditors haben, sehe ich nicht, warum Sie den Status nicht einfach in die FormEditor-Komponente verschieben und von dort einen Rückruf an die FieldEditors übergeben können, die den übergeordneten Status aktualisieren . Das scheint mir ein reaktiverer Weg zu sein.

Etwas entlang der Linie dieser vielleicht:

var FieldEditor = React.createClass({ 
    handleChange: function(event) { 
    var text = event.target.value; 
    this.props.onChange(this.props.id, text); 
    }, 

    render: function() { 
    return (
     <div className="field-editor"> 
     <input onChange={this.handleChange} value={this.props.value}/> 
     </div> 
    ); 
    } 
}); 

var FormEditor = React.createClass({ 
    getInitialState: function() { 
    return {}; 
    }, 
    handleFieldChange: function(fieldId, value) { 
    var newState = {}; 
    newState[fieldId] = value; 

    this.setState(newState); 
    }, 

    render: function() { 
    var fields = this.props.fields.map(function(field) { 
     var props = { 
     id: field, 
     onChange: this.handleFieldChange, 
     value: this.state[field] 
     } 
     return <FieldEditor {...props} /> 
    }, this); 

    return (
     <div> 
     {fields} 
     <div>{JSON.stringify(this.state)}</div> 
     </div> 
    ); 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
    var fields = ["field1", "field2", "anotherField"]; 

    return (
     <FormEditor fields={fields}/> 
    ); 
    } 
}); 


React.render(<App/>, document.body); 

http://jsbin.com/fabonujenu/8/edit

Edit: Statt FieldEditor Elemente als Kinder FormEditor zugeben ich einfach eine Liste von fieldIds geben und sie in der FormEditor schaffen statt. Dies macht es einfacher, dynamisch FieldEditors hinzufügen und macht die Render-Methode von FormEditor weniger wonkey.

Answer 2

Wenn Sie den Status einer Komponente Kinder zugreifen möchten, können Sie eine Eigenschaft ref jedem Kind genannt zuweisen. Diese Eigenschaft verwendet eine Callback-Funktion, die eine Referenz an die angefügte Komponente übergeben wird. Dieser Rückruf wird ausgeführt, unmittelbar nachdem die Komponente eingehängt oder ausgehängt wurde.

Zum Beispiel:

ES5:

<FieldEditor 
    ref={function(fieldEditor1){this.fieldEditor1 = fieldEditor1;}} 
    {...props} 
/> 

ES6:

<FieldEditor 
    ref={(fieldEditor1) => {this.fieldEditor1 = fieldEditor1;} 
    {...props} 
/> 

In diesen Beispielen wird die Bezugnahme auf die übergeordnete Komponente gespeichert wird. Um diese Komponente in Ihrem Code aufrufen, können Sie verwenden:

this.fieldEditor1 

und dann this.fieldEditor1.state verwenden, um den Zustand zu bekommen.

Eine Sache zu beachten, stellen Sie sicher, dass Ihr Kind Komponente geleistet hat, bevor Sie versuchen, darauf zuzugreifen^_^

Wenn Sie mehr lesen möchten über Ref Eigenschaft Reaktion, lesen Sie in diesem page von Facebook.

Stellen Sie sicher, dass Sie den Abschnitt "Don't Overuse Refs" gelesen haben, der besagt, dass Sie die state des Kindes nicht verwenden sollten, um Dinge "passieren zu lassen".

this helps^_^

Edit: Changed Antwort Rückruf Refs zu verwenden, wie bespannen Refs im Gegensatz String Refs in einer zukünftigen Version entfernt React.js wahrscheinlich (siehe Refs and the DOM für weitere Details).