使用 Material UI 的 TextField 组件进行反应验证

Question

我已经研究了一个小时，互联网上似乎没有太多例子。 我正在尝试验证输入字段，以便填充所有字段，否则会出现错误。 字符数量无关紧要，只需要填写输入即可。

所以这是我的状态对象

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

这是材料 ui 文本字段

<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" />

这是 onchange 处理程序

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

Answer 1

很可能您只想在用户尝试提交表单后添加此验证。 然后，您应该为formError创建一个新状态并将其添加到您的提交函数条件中，该条件将检查您的输入是否为空，然后将formError状态设置为 true。 之后，您的输入错误状态表达式将如下所示：

error={formError && firstName.length === 0}

只有在尝试提交带有空输入的表单时，您的输入才会以红色突出显示，您将获得良好的用户体验。

Answer 2

当用户提交表单时，由于您要做的就是验证是否在 firstName 和 lastName 字段中填写了某些内容，因此您可以使用以下任一方法进行检查：

this.state.field !== '' //returns true if it's filled in

或者

this.state.field.length > 0 //returns true if it's filled in

在您创建的任何“handleSubmit”函数中，您都可以调用一个单独的函数来验证您的所有字段。 该验证函数可能如下所示：

// returns 'true' if fields filled out, and 'false' if not 
validateForm = () => {
  if (this.state.firstName === '' || this.state.lastName === '') {
    //set error message: 'Please fill out all fields')
    return false;
  } else {
    return true;
  }
}