如何使用Material ui表单验证器进行验证

时间:2019-07-25 12:50:20

标签: reactjs react-redux material-ui

我尝试对我的material-ui form validator的redux表单实现reactjs,但我无法使其工作,但不知道是什么,而只是不显示验证或错误。

我尝试了很多方法和插件,但对我都无效,该如何验证我的实际表单?

const INITIAL_STATE = {
email: "",
password: "",
error: null
};

const updateByPropertyName = (propertyName, value) => () => ({
[propertyName]: value
});

class SignInPage extends Component {
constructor(props) {
  super(props);
  this.state = { ...INITIAL_STATE };
}

componentWillUnmount() {
  this.props.onResetState();
}

doSignInWithEmailAndPassword = event => {
  const { email, password } = this.state;
  this.props.onSignIn(email, password);
  event.preventDefault();
};

render() {
  if (isUserLogin()) {
    return <Redirect to={routes.HOME} />;
  }

  const { email, password } = this.state;
  const isInvalid = password === "" || email === "";
  return (
  <div className="login">
    <div className="col s12f m6 l7 xl7 SignIn centered">
        <form onSubmit={this.doSignInWithEmailAndPassword} id="signinf">
          <h4 className="title">
             Log In
          </h4>
          <p className="grey-text">Use your email account</p>
          <div>
            <TextValidator
              id="email"
              label="Email*"
              className="textField"
              margin="normal"
              color="primary"
              value={email}
              onChange={event =>
                this.setState(
                  updateByPropertyName("email", event.target.value)
                )
              }
            />
          </div>
          <div>
            <TextValidator
              id="password"
              label="Password*"
              type="password"
              color="primary"
              className="textField"
              autoComplete="current-password"
              margin="normal"
              value={password}
              onChange={event =>
                this.setState(
                  updateByPropertyName("password", 
event.target.value)
                )
              }
            />
          </div>
           <div>
             <label>
              <input type="checkbox" className="validate" 
id="signInCheck"/>
              <span>Keep me signed in</span>
            </label>
            </div>
          </div>
          <div>
            <br />
            <Button
              variant="raised"
              color=""
              id="signInButton"
              size="large"
              disabled={isInvalid}
              className="submit"
              type="submit"
            >
              Log in
            </Button>

我需要单独验证每个字段,即使有一个复选框也可以吗?我在寻找类似的问题,但没有运气

0 个答案:

没有答案