ReactJS:用于多个表单输入的单个onChange处理程序

时间:2019-06-27 23:04:04

标签: javascript reactjs

我有一个带有文本和数字输入类型的表格。在我的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处理程序?

2 个答案:

答案 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
       }
    }));
}