React.js管理有狀態的子級

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（）：{返回this.state.value}到FormRow按鈕，但是我不確定這是否是最佳實踐方法。

我發現自己經常使用這種模式，需要確定狀態的孩子人數眾多。

謝謝

Answer 1

這根本不是一個愚蠢的問題，並且是在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/

Answer 2

將輸入值綁定到某個模型（例如，在Backbone或Flux中構建），然后在提交時從那里檢索值，而無需觸摸輸入。