我有一个带有文本和数字输入类型的表格。在我的react应用程序中,我使用所有表单字段值在组件状态下维护一个嵌套对象formInput
:
this.state = {
// Other state variables
formInput: {
name1:'',
name2:'',
numberInput1:0,
numberInput2:0
}
}
我对React还是很陌生,在我的应用中,我目前对每个输入都有一个handleOnChange()
方法,这是一种非常粗糙的方法。有没有一种方法可以编写单个handleOnChange()
函数,该函数在输入更改时会更新我的组件状态?
我尝试过:
handleOnChange(evt) {
this.setState({[evt.target.name]: evt.target.value});
}
但是,如果表单输入字段未嵌套在组件formInput
的{{1}}对象中,则此方法有效。对于对象内的字段,是否有单独的state
处理程序?
答案 0 :(得分:1)
您可以通过以下操作使handleOnChange()
方法适用于嵌套formInput
:
handleOnChange(evt) {
/* Pass callback to setState instead (optional) */
this.setState(({ formInput }) => {
/* Compose next state object, with nested formInput
describing the updated value state of the form */
const nextState = {
formInput : {
...formInput,
[evt.target.name]: evt.target.value
}
}
return nextState;
});
}
如果由于构建配置或目标浏览器而无法使用扩展语法,则可以使用Object.assing()
来实现等效的“非扩展”,如下所示:
handleOnChange(evt) {
/* Extract name and value from event target */
const { name, value } = evt.target;
this.setState(({ formInput }) => {
const nextState = {
/* Use Object.assign() as alternate to ... syntax */
formInput : Object.assign({}, formInput, { [name]: value })
}
return nextState;
});
}
答案 1 :(得分:1)
是的,您可以使用类似的东西:
handleOnChange(evt) {
this.setState(prevState => ({
formInput: {
...prevState.formInput,
[evt.target.name]: evt.target.value
}
}));
}