德瑪西亞99
2019-10-15 10:02:04
我正在創(chuàng)建一個應(yīng)用程序,用戶可以在其中設(shè)計自己的表單。例如,指定字段名稱以及應(yīng)包括哪些其他列的詳細信息。該組件在此處可作為JSFiddle使用。我的初始狀態(tài)如下: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> ); }我想在用戶更改任何值時更新狀態(tài),但是我很難定位正確的對象: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> ); }});我應(yīng)該如何this.setState進行更新items[1].name?
3 回答

收到一只叮咚
TA貢獻1821條經(jīng)驗 獲得超5個贊
錯誤的方法!
handleChange = (e) => {
const { items } = this.state;
items[1].name = e.target.value;
// update state
this.setState({
items,
});
};
正如許多更好的開發(fā)人員在評論中指出的:改變狀態(tài)是錯誤的!
花了我一段時間來解決這個問題。以上工作,但它帶走了React的力量。例如,componentDidUpdate由于它是直接修改的,因此不會將其視為更新。
因此正確的方法是:
handleChange = (e) => {
this.setState(prevState => ({
items: {
...prevState.items,
[prevState.items[1].name]: e.target.value,
},
}));
};
添加回答
舉報
0/150
提交
取消