我的状态如下:
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);
}
我的问题是,当窗体被绑定时,这是设置状态的最佳方式吗?有没有一种方法可以在不太复杂的情况下使用更少的代码行?我发现我必须在使用表单进行双向绑定的每个页面上执行这些代码(有没有更好的方法?)。
任何意见都将不胜感激!谢谢!
发布于 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
}))
}
发布于 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/
https://stackoverflow.com/questions/50614528
复制相似问题