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

Question

在React中将表单值从子节点传递回父节点的好方法是什么？

假设我们有以下示例：

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 () {
      
  }
});

我尝试从父级传递一个onChange处理程序（在passBackChanges上触发，然后更新父级的状态。但是当来自Parent的不同子级之间交替时（更改） currentChild索引），这些变化似乎没有反映出来。

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是处理状态更改的唯一方法。

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