ReactJS：用於多個表單輸入的單個onChange處理程序

Question

我有一個帶有文本和數字輸入類型的表單。 在我的react應用程序中，我在組件狀態下使用所有表單字段值維護一個嵌套對象formInput ：

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

我對React很handleOnChange() ，在我的應用程序中，我目前對每個輸入都有一個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;
    });
}

Answer 2

是的，您可以這樣做，可以使用類似以下內容的方法：

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