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

Question

我有一个包含文本和数字输入类型的表单。在我的 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});
}

但如果表单输入字段未嵌套在我的组件 state 的 formInput 对象中，则此方法有效。是否有不同的方法来为对象中的字段设置单个 onChange 处理程序？

Answer 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;
    });
}