如何在reactjs中验证材料ui TextField？

Question

我在我的反应应用程序中使用材料 ui TextField。我需要知道如何对下面带有电子邮件和密码的代码使用错误和辅助文本验证？ 请仔细阅读下面给出的代码，并为我提供一个合适的解决方案，我可以解决

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import swal from 'sweetalert';

class Login extends Component {
  constructor(props){
    super(props);
    this.state={
      email: '',
      password: ''
    }
  }

  async handleClick() {
    const { email, password } = this.state;
    let options = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    }
    let response = await fetch('/login', options);
    response = await response.json();        
    if (!response) {
      swal({
        title: "Wrong Entry",
        text: "Check your email and password",
        icon: "warning",
        button: "OK",
      });
      return;
    }

    if(response === 'user'){
      await auth.userLogin();
      this.props.history.push('/app/my');
      return;

    }



    options = {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' }
    }

    let res = await fetch('/team-check', options);
    res = await res.json();
    await auth.login();
    if (!res) {
      this.props.history.push('/choose-teams')
    } else {
      this.props.history.push('/dashboard',{state: { detail: response }})
    }
  }

  render() {
    return (
      <div>
        <MuiThemeProvider>
          <div>
          <AppBar
              title="User-Login"
            />
            <TextField
              hintText="Enter your Email"
              floatingLabelText="email"
              onChange = {(event,newValue) => this.setState({email:newValue})}
              />
            <br/>
            <TextField
                type="password"
                hintText="Enter your Password"
                floatingLabelText="Password"
                onChange = {(event,newValue) => this.setState({password:newValue})}
                />
              <br/>
              <RaisedButton label="Submit" primary={true} style={style} onClick={(event) => this.handleClick(event)}/>

          </div>
          <Link to="/forgot-password">Forgot-Password</Link>
          </MuiThemeProvider>
      </div>
    );
  }
}

const style = {
  margin: 15,
};

export default Login;

我已经尝试了许多堆栈溢出的答案，但现在都已经过时了。请仔细阅读我的代码，我们将不胜感激

Answer 1

您可以使用error and helperText props 并进行验证

文本字段

        <TextField
          error={!!this.state.errors.email}
          hintText="Enter your Email"
          floatingLabelText="email"
          onChange={(event, newValue) => this.setState({ email: newValue })}
          helperText={this.state.errors.email && this.state.errors.email}
        />

处理提交：

async handleClick() {
    const { email, password } = this.state;
    if (email.length < 4) {
      this.setState({
        errors: { ...this.state.errors, email: "please enter valid email" }
      });
    }
  ...

工作demo is here

请注意，您需要自己添加/重置错误。您还可以考虑使用验证库，例如 this 。 formik 和 yup 也是受欢迎的选择。