反应:这在事件处理程序中是空的

我有一个LoginForm组件。 我想在提交之前检查, passwordpassword loginName设置。 我试着用这个代码(省略了很多东西):

 class LoginForm extends Component { constructor() { super(); this.state = { error: "", loginName: "", password: "", remember: true }; } submit(e) { e.preventDefault(); if(!this.state.loginName || !this.state.password) { //this is null this.setState({ error: "Fill in both fields" }); } else { console.log("submitting form"); } } render() { return ( <div className="col-xs-12 col-sm-6 col-md-4"> <form className="login" onSubmit={this.submit}> <button type="submit" className="btn btn-default">Sign in</button> </form> </div> ); } } export default LoginForm; 

然而,我在事件处理程序中得到一个TypeError ,说this是null。

我该怎么做?

你需要设置this submit方法,因为现在thisundefined ,对于这个操作你可以使用.bind

 onSubmit={ this.submit.bind(this) } 

Example

或者你可以使用箭头function

 onSubmit={ (e) => this.submit(e) } 

Example

React是为你绑定callback的。 但是现在它已经不存在了,你必须自己绑定它或者像包装一样

 onSubmit={() => this.submit()} 

对于那些使用Babel的人,可以使用transform-function-bind插件的bind运算符 :

 onSubmit={::this.submit} 

这是一个语法糖:

 onSubmit={this.submit.bind(this)}