個々の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のレンダリングメソッドをより少なくすることができます。
*「子供の状態にアクセスすることはできますか?それは理想的ですか?」*いいえ状態は内部的なものであり、外部に漏れてはいけません。あなたはあなたのコンポーネントのアクセサメソッドを実装することができますが、それは理想的ではありません。 –
@FelixKlingそれでは、子どもと親のコミュニケーションが理想的な方法はイベントだけであることを示唆していますか? –
はい、イベントは片道です。 Fluxのような一方向のデータフローを促進させる:https://facebook.github.io/flux/ –