我尝试对我的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>
我需要单独验证每个字段,即使有一个复选框也可以吗?我在寻找类似的问题,但没有运气