在React中的父子之间传递表单状态

Question

What is a good way of passing form values from a child back to a parent in React?

Let's say we have the following example:

 var Parent = React.createClass({ render: function () { <Child data={this.state.data[this.state.currentChild]}/> }, getInitialState : function () { return { data: [{ field1: 'Text', field2: 'Text2' }], currentChild: 0 } } }); var Child = React.createClass({ render: function () { <div> <input name="field1" value={this.props.data.field1} onChange={this.passBackChanges}/> <input name="field2" value={this.props.data.field2} onChange={this.passBackChanges}/> </div> }, passBackChanges: function () { } }); 

I tried passing in an onChange handler from the parent (which fires on passBackChanges and in turn updates the Parent's state. However when alternating between the the different children from Parent (changing currentChild index), the changes don't seem to reflect.

 var Parent = React.createClass({ render: function () { <Child data={this.state.data[this.state.currentChild]} onChange={this.updateState}/> }, getInitialState : function () { return { data: [{ field1: 'Text', field2: 'Text2' }], currentChild: 0 } }, updateState: function (state) { this.state.data[this.state.currentChild] = state; this.setState({ data: this.state.data }) } }); var Child = React.createClass({ render: function () { <div> <input ref="field1" value={this.props.data.field1} onChange={this.passBackChanges}/> <input ref="field2" value={this.props.data.field2} onChange={this.passBackChanges}/> </div> }, passBackChanges: function () { this.props.onChange({ field1: this.refs.field1.getDOMNode().value, field2: this.refs.field2.getDOMNode().value }); } }); 

Answer 1

setState is the only way to handle state changes.

  updateState (state) { let newState = this.state.data; newState[this.state.currentChild] = state; this.setState({ data: newState }) }