我为登录页面写了验证。当我执行我的脚本时，我在...this.state收到错误。下面我附上我的代码。
error image
import React, {Component} from 'react';
import {Link} from 'react-router';
import '../css/onboarding.scss';
class Login extends Component{
constructor(props){
super(props);
state = {
email: "",
emailError: "",
password: "",
passwordError: ""
}
this.change = this.change.bind(this);
};
change(e) {
this.props.onChange({ [e.target.name]: e.target.value });
this.setState({
[e.target.name]: e.target.value
});
};
validate() {
let isError = false;
const errors = {
emailError: "",
passwordError: ""
};
if (this.state.password.length < 5) {
isError = true;
errors.usernameError = "password needs to be atleast 5 characters long";
}
if (this.state.email.indexOf("@") === -1) {
isError = true;
errors.emailError = "Requires valid email";
}
this.setState({
...this.state,
...errors
});
return isError;
};
onSubmit (e) {
e.preventDefault();
// this.props.onSubmit(this.state);
const err = this.validate();
if (!err) {
// clear form
this.setState({
email: "",
emailError: "",
password: "",
passwordError: ""
});
this.props.onChange({
email: "",
password: ""
});
}
};
render(){
return(
<main className="aw-login-wrapper">
<article className="aw-aside-panel aw-banner-aside">
<section className="aw-slider-list">
<div className="aw-slider-item aw-slider-image-1 active">
<div className="aw-slider-content">
<h3>Work is what you do,</h3>
<h3>not where you do it</h3>
</div>
</div>
<div className="aw-slider-item aw-slider-image-2">
<div className="aw-slider-content">
<h3>Live locally,</h3>
<h3>work globally</h3>
</div>
</div>
<div className="aw-slider-item aw-slider-image-3">
<div className="aw-slider-content">
<h3>To think outside the box,</h3>
<h3>go outside the box</h3>
</div>
</div>
<div className="aw-slider-item aw-slider-image-4">
<div className="aw-slider-content">
<h3>Go virtually anywhere,</h3>
<h3>no CO required</h3>
</div>
</div>
<ul className="aw-slider-navigation">
<li className="slider-active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</article>
<article className="aw-account-column-right">
<a className="aw-brand-logo"></a>
<section className="aw-account-panel aw-login-panel" id="signin-form-container">
<div className="aw-account-third-parties">
<h3>Sign in to your account</h3>
<div className="aw-btn-col-wrapper">
<button className="aw-btn aw-btn-google" id="signin-with-google">Sign in with Google</button>
<div className="aw-hor-divider"><span>or</span></div>
</div>
</div>
<fieldset className="aw-account-fieldset" id="signin-input-group">
<div className="aw-form-group">
<label>Email address</label>
<input type="text" className="aw-input-default email-input" name = "email" id="user-email" tabIndex="1"
value={this.state.email}
onChange={e => this.change(e).bind(this)} />
<p className="aw-error-txt"></p>
</div>
<div className="aw-form-group">
<label>Password</label>
<input type="password" className="aw-input-default" id="user-password" name = "password" tabIndex= "2"
value={this.state.password}
onChange={e => this.change(e).bind(this)} />
<p className="aw-error-txt"></p>
</div>
<input type="checkbox" className="uncheck" id="remember-me" tabIndex="3" style={{visibility: 'hidden'}}/>
<span className="aw-label-checkbox" style={{visibility:'hidden'}}>Remember me</span>
<span className="aw-label-forget-pass" id="process-forgot-password">Forgot your password?</span>
<p className="aw-error-txt" id="error-message"></p>
<button className="aw-btn aw-btn-secondary" id="process-login" tabIndex= "3">Login</button>
</fieldset>
<p className="aw-account-footer-txt">Don't have an account? <Link to="signup" id="signupHtml" tabIndex="4">Sign up</Link></p>
</section>
<section className="aw-password-reset-success aw-message-center">
<h3 className="aw-form-header">Password reset sent</h3>
<p className="aw-form-paragraph">We've just emailed you instructions on how to reset your password.</p>
<a href="">Back to Login</a>
</section>
<p className="aw-error-txt" id="expired-mail-link">The link got expired, please try again.</p>
<section className="aw-account-panel aw-message-center aw-forget-panel">
<h3 className="aw-form-header">Forgot your password?</h3>
<p className="aw-form-paragraph">We'll email you instructions on how to reset it.</p>
<fieldset className="aw-account-fieldset">
<div className="aw-form-group">
<label>Email address</label>
<input type="text" className="aw-input-default" name = "email" id="mail-reset-password" tabIndex= "1"/>
<p className="aw-error-txt" id="resent-pwd-mail">Email is not registered with Anywhereworks. </p>
</div>
<button className="aw-btn aw-btn-secondary" id="resetPassword" tabIndex="2">Reset password</button>
</fieldset>
<p className="aw-account-footer-txt">Remembered it? <Link to="login" tabIndex="3">Login</Link></p>
</section>
</article>
</main>
)
}
}
export default Login;