题
我在 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 不变性助手, ,但请了解如何使用数组索引。
谢谢。
解决方案
您可以使用索引来更新正确的数组项,方法是将其传递给 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()
叫做。
其他提示
我想我应该把这个库扔掉,因为它是专门为深度嵌套的反应状态设计的,
https://github.com/mquan/cortex
您可以更新每个组件中的项目,它会自动逐渐增加,而无需定义回调来传递事件。
不隶属于 StackOverflow