ReactJS：用于多个表单输入的单个 onChange 处理程序答案

【问题标题】：ReactJS: Single onChange handler for multiple form inputsReactJS：用于多个表单输入的单个 onChange 处理程序
【发布时间】：2019-06-27 23:04:04
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs

【解决方案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;
    });
}

【讨论】：

谢谢！看起来我不能在我的应用程序中使用扩展运算符。我不断收到 Module build failed: SyntaxError: Unexpected token。我需要使用 babel 插件或坚持使用较旧的 javascript 功能。我可以用什么替换 ...formInput？
啊，对了——等一下，我会为你更新答案:)

【解决方案2】：

是的，你可以这样做，你可以使用类似的东西：

handleOnChange(evt) {
  this.setState(prevState => ({
    formInput: {
        ...prevState.formInput,
        [evt.target.name]: evt.target.value
       }
    }));
}

【讨论】：