如何修复“Response-dom.Development.js:287未定义的TypeError:无法读取未定义的属性'setState‘”

Question

我正在尝试将我的反应性表单上传到状态，这样我就可以用这些凭据获取一个API。

我尝试过创建一个如下所示的函数：

handleEmail(event) {
    this.setState({email: event.target.value});
  }
  handlePassword(event) {
    this.setState({password: event.target.value});
  }
  render() {
    return (
      <div>
        <NavBar />
        <form className="pt-6 container">
          <div className="form-group">
            <label className="mt-6" >Your email</label>
            <input name className="form-control" onChange={this.handleEmail} placeholder="Email" type="email" />
          </div> {/* form-group// */}
          <div className="form-group">
            <a className="float-right" href="#">Forgot?</a>
            <label>Your password</label>
            <input className="form-control" onChange={this.handlePassword} placeholder="******" type="password" />
          </div> {/* form-group// */}

Answer 1

这是一个范围界定的问题。由于这些方法是在事件触发器之后调用的，所以this指向调用它的作用域，而不是指向定义它的类实例。

您需要使用箭头函数来修复这个问题。

handleEmail = (event) => {
    this.setState({email: event.target.value});
  }
  handlePassword = (event) => {
    this.setState({password: event.target.value});
  }

Answer 2

您需要绑定您的函数，添加如下构造函数：

constructor(props) {
    super(props);
    this.state = {
        email: '',
        password:''
    };

    this.handleEmail= this.handleEmail.bind(this);
    this.handlePassword= this.handlePassword.bind(this);
}