Javascript “如何修复”；react dom.development.js:287未捕获类型错误：无法读取属性'；设置状态'；“未定义”的定义；

我正在尝试将我的react表单上载到状态，以便获取具有这些凭据的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// */}

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

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

handleEmail（事件）{
this.setState（{email:event.target.value}）；
}
handlePassword（事件）{
this.setState（{密码：event.target.value}）；
}
render（）{
返回(
你的电子邮件
{/*表单组//*/}
你的密码
{/*表单组//*/}

这是一个范围问题。由于这些方法是在事件触发后调用的，

This

指向调用它的范围，而不是指向定义它的类实例。
您需要使用箭头函数来修复此问题

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

---

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

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// */}

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

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

关于

这个

未定义的问题太多了；您需要绑定它或使用箭头函数。