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

我有一个文本和数字输入类型的表单。在我的react应用程序中，我在组件状态下维护一个嵌套对象

formInput

，其中包含所有表单字段值：

this.state = {
// Other state variables
    formInput: {
    name1:'',
    name2:'',
    numberInput1:0,
    numberInput2:0
  }
}

我是个新手，在我的应用程序中，我目前有一个

handleOnChange（）

方法来处理每个输入，这是一种非常粗糙的方法。有没有一种方法可以编写一个

handleOnChange（）

函数，在输入发生更改时更新我的组件状态

我试过这个：

handleOnChange(evt) {
    this.setState({[evt.target.name]: evt.target.value});
}

---

但是，如果表单输入字段没有嵌套在我的组件的

状态

的

formInput

对象中，则此方法可以工作。对于对象中的字段，是否有一个单独的

onChange

处理程序的不同方法？

您可以调整

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

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

更新 如果由于生成配置或目标浏览器的原因，排列语法不可用，则可以使用

Object.assing（）

实现“非排列”等效语法，如下所示：

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

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

---

是的，您可以这样做，您可以使用以下内容：

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

---

谢谢看起来我无法在我的应用程序中使用spread操作符。我一直获取模块生成失败：SyntaxError:意外令牌。我需要使用babel插件或坚持使用旧的javascript功能。我可以用什么来代替…formInput？啊，好的-等一下，我会为您更新答案：）