更新深层 ReactJS 状态

Question

我在 ReactJS 组件状态中有一个项目数组，我正在迭代这些项目以创建表单。我的问题是：当字段更改时，如何最好地更新这些项目？

例如：

var items = this.state.foo.bar.items.map(function(item, i) {
    return <input value={item.baz} onChange={??}
});

在这种情况下，我的 onChange 处理程序会是什么样子？我要改变吗 item.baz 直接财产，然后 this.setState(state)？看来是错误的。我正在看 React 不变性助手, ，但请了解如何使用数组索引。

谢谢。

Answer 1

您可以使用索引来更新正确的数组项，方法是将其传递给 onChange 通过 bind 然后动态构建要传递给的对象 update:

var Hello = React.createClass({
    getInitialState : function() {
      return  {
        foo : {
          bar : {
            items : [ { baz : 1 }, { baz : 2 }, { baz : 3 } ]
          }
        }
      };
    },
    onChange : function( idx, item, event ) {
      var objForUpdate = { foo: { bar: { items : {} } } };
      objForUpdate.foo.bar.items[ idx ] = { $set : { baz : event.target.value } };
      var newData = React.addons.update( this.state, objForUpdate );
      this.setState( newData );
    },
    render: function() {
      var _this = this;
      var items = this.state.foo.bar.items.map(function(item, i) {
        return <input value={item.baz} onChange={_this.onChange.bind( _this, i, item )}></input>
      });
      return <div>{items}</div>;
    }
});

我的理解是这比类似的东西有一个优势

onChange : function( idx, item, event ) {
  item.baz = event.target.value;
  this.setState( this.state );
}

如果你要覆盖 shouldComponentUpdate 并且比每次都更有选择性地重新渲染 this.setState() 叫做。

jsfiddle

Answer 2

我想我应该把这个库扔掉，因为它是专门为深度嵌套的反应状态设计的，

https://github.com/mquan/cortex

您可以更新每个组件中的项目，它会自动逐渐增加，而无需定义回调来传递事件。