小编典典

React:事件处理程序中为null

reactjs

我有一个LoginForm组件。我要检查之前提交,这两个loginNamepassword设置。我尝试使用此代码(省略了很多内容):

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

我该怎么办?


阅读 393

收藏
2020-07-22

共1个答案

小编典典

你需要设置thissubmit方法,因为现在thisundefined,对于此操作,您可以使用.bind

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

Example

或者您可以使用箭头功能

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

Example

2020-07-22