使用动态密钥名称设置状态的最佳方式是什么？
使用动态密钥名称设置状态的最佳方式是什么？
提问于 2018-05-31 07:13:59
我的状态如下：
state = {
isDirty: false,
form: {
username: '',
firstName: '',
lastName: ''
}
}我有两个输入字段，它们通过onChanged事件链接回状态，这些事件使用匹配的ID并使用以下函数调用：
inputChangedHandler = (event) => {
const updatedState = { ...this.state, isDirty: true };
updatedState.form[event.target.id] = event.target.value;
this.setState(updatedState);
}我的问题是，当窗体被绑定时，这是设置状态的最佳方式吗？有没有一种方法可以在不太复杂的情况下使用更少的代码行？我发现我必须在使用表单进行双向绑定的每个页面上执行这些代码(有没有更好的方法？)。
任何意见都将不胜感激！谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-31 08:13:50
实际上，有很多方法可以做到这一点。
我觉得这是一种使用spread operator的简单方法
inputChangedHandler = (event) => {
const id = [event.target.id];
const value = [event.target.value];
this.setState(prevState => ({
form: {...prevState.form,
[id]: value
}, isDirty: true
}))
}Stack Overflow用户
发布于 2018-05-31 08:00:53
如果你想让它更短：
inputChangedHandler = (id, value) => {
const { form } = this.state;
this.setState({
isDirty: true,
form: Object.assign({}, form, { [id]: value }
// or using lodash, this way you will be able to update nested object values
form: Object.assign({}, form, _.set(form, id, value)
});
}
...
<input id="username" onChange={({ target }) => inputChangeHandler(target.id, target.value)} />尽管我建议您使用reduxForm https://redux-form.com/7.3.0/examples/simple/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50614528
复制相关文章
相似问题