我在 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 immutability helpers，但看看如何使用数组索引。
谢谢。
您可以使用索引来更新正确的数组项，方法是将其传递给onChangevia 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()调用都更有选择性。
以为我只是把这个库扔在那里，因为它是专门为深度嵌套的react状态设计的，
https://github.com/mquan/cortex
您可以更新每个组件中的项目，它会自动向上传递，而无需定义回调来传递事件。