Reactで子供の状態にアクセスするには？

Question

私は、次の構造を持っている：

FormEditorが - 複数のFieldEditor FieldEditorを保持している - フォームのフィールドを編集し、ボタンがFormEditor内クリックされたとき、それは状態

だでそれについての様々な値を保存し、私がしたいですすべてのFieldEditorコンポーネントのフィールドに関する情報、その状態にある情報、FormEditor内のすべての情報を収集することができます。

フィールドの情報をFieldEditorの状態外に格納し、その代わりにFormEditorの状態にすると考えました。しかし、それはがそれぞれのコンポーネントを変更し、その状態に情報を保存するときに、そのコンポーネントのそれぞれを受信することを必要とします。

代わりに子どもの状態にアクセスすることはできませんか？それは理想的ですか？

Answer 1

個々のFieldEditorsのonChangeハンドラが既にある場合は、FormEditorコンポーネントまで状態を移動してそこからコールバックをFieldEditorsに渡して親状態を更新できない理由がわかりません。それは、私にとってもっとやりがいのある方法のようです。

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

編集：おそらく、この線に沿って

何か代わりにFormEditorの子としてFieldEditor要素を渡すので、私はちょうどfieldIdsのリストを渡して、代わりにFormEditorでそれらを作成します。これにより、FieldEditorを動的に追加することが容易になり、FormEditorのレンダリングメソッドをより少なくすることができます。

Answer 2

コンポーネントの子の状態にアクセスする場合は、各子にrefというプロパティを割り当てることができます。このプロパティは、添付されたコンポーネントへの参照を渡されるコールバック関数をとります。このコールバックは、コンポーネントがマウントまたはアンマウントされた直後に実行されます。例えば

：

ES5：

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

ES6：これらの例で

​​3210

基準は、親コンポーネントに格納されています。あなたのコード内でこのコンポーネントを呼び出すには、使用することができます。その後、

this.fieldEditor1 

と状態を取得するためにthis.fieldEditor1.stateを使用しています。注意すべき

一つのこと、あなたがそれにアクセスしようとする前に、あなたの子コンポーネントをレンダリングしていることを確認してください^ _^

あなたはについての詳細を読みたい場合の参照プロパティを反応させるのは、Facebookからこのpageをチェックしてください。

子供のstateを「起こらせる」ために使用しないでくださいという「Don't Overuse Refs」セクションを必ず読んでください。

希望はこのことができます^ _^

編集：文字列、参考文献が（詳細はRefs and the DOMを参照）、将来のReact.jsのリリースで削除される可能性があるとして、文字列、参考文献とは対照的に、コールバック、参考文献を使用するように答えを変更しました。