React TypeError：無法讀取未定義的屬性（讀取“名稱”）

Question

我正在將 React 與 Material UI 的 Textfield 組件一起使用。 試圖找出以最少的冗余設置表單狀態的最佳方法。 例如，我有 8 個不同的輸入字段。 而不是為每個輸入設置單獨的處理程序，例如 handleFirstName、handleLastName、handleEmail、handleInfo 等。

因此，為了實現這一點，我嘗試創建一個 handleChange 處理程序，如下所示：

   handleChange = (e) => {
     this.setState({
       [e.target.name]: e.target.value
     });
   }

在每個組件上，

               <TextField
                className={classes.formInput}
                name="firstName"
                onChange={e => this.handleChange(e.target.value)}
                required
                id=""
                type="text"
                InputLabelProps={{
                  shrink: true,
                }}
                error={!firstName}
                helperText="Name is required"
                label="First Name"
                variant="standard" />
              <TextField
                className={classes.formInput}
                name="lastName"
                onChange={e => this.handleChange(e.target.value)}
                required
                id=""
                type="text"
                InputLabelProps={{
                  shrink: true,
                }}
                label="Last Name"
                variant="standard" />

這是我的狀態對象

 constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      ...,
    
    };
  }

這些只是兩個輸入字段，但還有大約 6 個看起來相同的字段。 有什么想法可以對抗這個未定義的名稱嗎？

Answer 1

問題是您沒有傳遞完整的事件對象。 您只傳遞值。 這就是您將名稱設為未定義的原因。

嘗試將 onChange 事件更改為以下 -

onChange={this.handleChange}

通過這種方式，您將在函數的e變量中獲得完整的事件對象。

Answer 2

我認為您需要在單個函數中處理多個輸入字段更改。這是可行的。 嘗試這個

handleChange = (e)=>{
    {name,value} = e.target;
    this.setState({
        [name]=value;
    });
}

最后何時將 onChange 方法傳遞給字段使用：

onChange = {this.handleChange}