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

我有一个LoginForm组件。 我想在提交之前检查， password和password 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。

我该怎么做？

Answer 1

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

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

Example

或者你可以使用箭头function

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

Example

Answer 2

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

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

Answer 3

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

 onSubmit={::this.submit} 

这是一个语法糖：

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