如何访问React中的儿童状态？
我有以下结构：
FormEditor – 保存多个FieldEditor FieldEditor – 编辑表单的一个字段并保存其状态的各种值
当在FormEditor中单击一个button时，我希望能够收集有关所有FieldEditor组件中的字段的信息，处于其状态的信息，并将其全部包含在FormEditor中。
我考虑将FieldEditor状态以外的字段信息存储FieldEditor ，并将其置于FormEditor的状态。 但是，这将需要FormEditor来监听它们的每个FieldEditor组件，因为它们将信息更改并存储在状态中。
我不能只是访问儿童的状态吗？ 这是理想的吗？
如果你已经有单独的FieldEditor的onChange处理程序，我不明白为什么你不能只将状态移动到FormEditor组件，只是传递一个callback到FieldEditors，将更新父状态。 对我来说，这似乎是一个更为React-y的方式。
这也许是：
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
编辑：而不是将FieldEditor元素作为子元素传递给FormEditor我只需传递一个fieldIds列表，然后在FormEditor中创build它们。 这使得更容易dynamic添加FieldEditor，并使FormEditor的渲染方法减lesswonkey。
如果要访问组件的子项的状态，则可ref每个子项分配一个名为ref的属性。 该属性采用一个callback函数，该函数传递一个对附件的引用。 该组件在装载或卸载后立即执行。
例如：
ES5：
<FieldEditor ref={function(fieldEditor1){this.fieldEditor1 = fieldEditor1;}} {...props} />
ES6：
<FieldEditor ref={(fieldEditor1) => {this.fieldEditor1 = fieldEditor1;} {...props} />
在这些例子中，引用存储在父组件上。 要在你的代码中调用这个组件，你可以使用：
this.fieldEditor1
然后使用this.fieldEditor1.state来获取状态。
有一件事要注意，确保您的子组件在您尝试访问它之前已经呈现^ _ ^
如果你想阅读更多关于React的ref属性，请查看Facebook上的这个页面 。
确保你阅读了“ 不要过度使用参考资料 ”一节，说明你不应该使用孩子的state来“使事情发生”。
希望这有助于^ _ ^
编辑：改变回答使用callback参考，而不是string参考，因为string参考可能会被删除在未来的React.js版本（请参阅参考文献和DOM的更多细节）。
