我正在使用 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 个字段看起来相同。有什么想法可以解决这个未定义的名称吗？