Reactjs 管理有状态的孩子

Question

我有一个动态的子列表，它们是表单输入。

例如：

var FormRows = React.createClass({
  getInitialState: function() {
     return {
        rows: []
     }
   },
   createRows: function() {
      this.props.values.maps(value){
         rows.push(<FormRow ...handlers... ...props... value={value} />
      }
    },
    addNewRow{
        // add a new row 
    },
    render: function() {
     return (
        <div> 
          {this.state.rows}
        </div> 
     );
  });

  var FormRow = React.createClass({
    getInitialState: function() {
     return {
        value: this.props.value || null
     }
   },
    render: function() { 
        <input type='text' defaultValue={this.state.value} ...changeHandler ... }
    }

  });

这是一个简化的版本，但想法是，它是一个动态表单，用户可以单击加号按钮添加一行，以及一个减号按钮，这会将行设置为隐藏的可见性。

这个状态嵌套了 n 层。真正从孩子那里获得状态并提交表格的最佳方法是什么？我可以使用 'ref' 将函数添加到 getFormValue(): { return this.state.value } 到 FormRow 按钮，但我不确定这是否是最佳实践方式。

我发现自己经常使用这种模式，一组未确定大小的孩子，需要传递状态。

谢谢

Answer 1

将输入值绑定到某个模型（例如在 Backbone 或 Flux 中构建）并在提交时从那里检索值，而无需触摸输入。

Answer 2

这根本不是一个愚蠢的问题，也是在 React 中使用通量主体的一个很好的例子。考虑这样的事情：

var App

// The "model"
var Model = {
  values: ['foo', 'bar'],
  trigger: function() {
    App.forceUpdate()
    console.log(this.values)
  },
  update: function(value, index) {
    this.values[index] = value
    this.trigger()
  },
  add: function() {
    this.values.push('New Row')
    this.trigger()
  }
}   

var FormRows = React.createClass({
  addRow: function() {
    Model.add()
  },
  submit: function() {
    alert(Model.values);
  },
  render: function() {
    var rows = Model.values.map(function(value, index) {
      return <FormRow key={index} onChange={this.onChange} index={index} value={value} />
    }, this)
    return (
      <div>{rows}<button onClick={this.addRow}>Add row</button><button onClick={this.submit}>Submit form</button></div>
    )
  }
})

var FormRow = React.createClass({
  onChange: function(e) {
    Model.update(e.target.value, this.props.index)
  },
  render: function() { 
    return <input type='text' defaultValue={this.props.value} onChange={this.onChange} />
  }
});

App = React.render(<FormRows />, document.body)

我使用 Array 和forceUpdate 使用了一个简化的模型/事件示例，但这里的重点是让模型“拥有”表单数据。然后子组件可以对该模型进行 API 调用，并使用新数据 (Flux) 触发整个 App 的重新渲染。

然后只需在提交时使用模型数据。

演示：http://jsfiddle.net/ekr41bzr/