我正在创建一个应用程序,用户可以在其中设计自己的表单。例如,指定字段名称以及应包括哪些其他列的详细信息。该组件在此处可作为JSFiddle使用。我的初始状态如下:var DynamicForm = React.createClass({ getInitialState: function() { var items = {}; items[1] = { name: 'field 1', populate_at: 'web_start', same_as: 'customer_name', autocomplete_from: 'customer_name', title: '' }; items[2] = { name: 'field 2', populate_at: 'web_end', same_as: 'user_name', autocomplete_from: 'user_name', title: '' }; return { items }; }, render: function() { var _this = this; return ( <div> { Object.keys(this.state.items).map(function (key) { var item = _this.state.items[key]; return ( <div> <PopulateAtCheckboxes this={this} checked={item.populate_at} id={key} populate_at={data.populate_at} /> </div> ); }, this)} <button onClick={this.newFieldEntry}>Create a new field</button> <button onClick={this.saveAndContinue}>Save and Continue</button> </div> ); }我想在用户更改任何值时更新状态,但是我很难定位正确的对象:var PopulateAtCheckboxes = React.createClass({ handleChange: function (e) { item = this.state.items[1]; item.name = 'newName'; items[1] = item; this.setState({items: items}); }, render: function() { var populateAtCheckbox = this.props.populate_at.map(function(value) { return ( <label for={value}> <input type="radio" name={'populate_at'+this.props.id} value={value} onChange={this.handleChange} checked={this.props.checked == value} ref="populate-at"/> {value} </label> ); }, this); return ( <div className="populate-at-checkboxes"> {populateAtCheckbox} </div> ); }});我应该如何this.setState进行更新items[1].name?
3 回答

收到一只叮咚
TA贡献1821条经验 获得超4个赞
错误的方法!
handleChange = (e) => {
const { items } = this.state;
items[1].name = e.target.value;
// update state
this.setState({
items,
});
};
正如许多更好的开发人员在评论中指出的:改变状态是错误的!
花了我一段时间来解决这个问题。以上工作,但它带走了React的力量。例如,componentDidUpdate由于它是直接修改的,因此不会将其视为更新。
因此正确的方法是:
handleChange = (e) => {
this.setState(prevState => ({
items: {
...prevState.items,
[prevState.items[1].name]: e.target.value,
},
}));
};
没有找到匹配的内容?试试慕课网站内搜索吧
添加回答
举报
0/150
提交
取消