React：事件处理程序中为null

Question

我有一个LoginForm组件。我要检查之前提交，这两个loginName和password设置。我尝试使用此代码（省略了很多内容）：

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是空的。

我该怎么办？

Answer 1

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

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

Example

或者您可以使用箭头功能

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

Example