基于Material UI TextField组件的React表单必填校验实现问题

问题原因 #

• onChange事件的传参逻辑错误：你当前在TextField的onChange属性中直接传入了e.target.value给handleChange，导致handleChange接收到的是字符串值而非事件对象，无法通过e.target.name匹配到对应state字段，state不会正常更新，校验逻辑自然无法触发。
• error属性绑定错误：firstName对应的TextField中error={!firstName}没有指定从this.state取值，会触发变量未定义错误，无法正确判断校验状态。
• lastName对应的TextField未添加error和helperText属性，就算校验逻辑正常也无法展示错误提示。

修复代码 #

1. 调整onChange绑定

把每个TextField的onChange属性直接绑定handleChange即可，不需要额外封装一层传值：

onChange={this.handleChange}

2. 补充完善TextField的校验属性

每个输入框都要绑定对应state的校验逻辑，示例如下：

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

3. handleChange逻辑无需改动，保持原有即可：

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

可选优化（提交时全局校验） #

如果需要在点击提交按钮时一次性触发所有字段的校验，可以在提交函数中增加逻辑：

handleSubmit = () => {
  const { firstName, lastName } = this.state;
  // 校验所有必填字段非空
  const isValidate = firstName.trim() && lastName.trim();
  if (!isValidate) {
    // 可在此处添加全局错误提示
    return;
  }
  // 校验通过后执行提交操作
}

内容的提问来源于stack exchange，提问作者Kenny Quach