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

Question

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

这是我的状态对象

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

这里是 material 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;
  }
}

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

React validation using Material UI's TextField components

javascript

validation

input-field

reactjs

material-ui