React：事件处理程序中为null

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个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是空的。

我该怎么办？

回答：

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

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

Example

或者您可以使用箭头功能

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

Example

以上是 React：事件处理程序中为null 的全部内容， 来源链接： utcz.com/qa/400645.html

回到顶部