Question

我正在使用create-app制作一个React应用，并且正在制作一个注册表格，目前只有两个字段，一个用于电子邮件，一个用于密码。

我正在做一个简单的测试，我想通过使用警报来显示输入的值，就像这样：

import React, { Component } from 'react';

class App extends Component {

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

  handleEmailChange(e){
    this.setState({email:e.target.value})
  }
  handlePasswordChange(e){
    this.setState({password:e.target.value})
  }

  signIn(){
    alert('Email address is ' + this.state.email + ' Password is ' + this.state.password);
  }

  render() {
    return (
      <form className="form-signin">
                <h2 className="form-signin-heading"> Please sign in </h2>
                <label for="inputEmail" className="sr-only"> Email address</label>
                <input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
                <label for="inputPassword" className="sr-only"> Password</label>
                <input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required />
                <button className="btn btn-lg btn-primary btn-block"  onClick={this.signIn} type="button"> Sign in </button>
      </form>
    );
  }
}

export default App;

我跑步时

npm start

我可以在localhost上看到我的应用程序，但是当我填写值并想查看那些结果时，我会收到此错误：

TypeError: this is undefined

  23 | signIn(){
> 24 |   alert('Email address is ' + this.state.email + ' Password is ' + this.state.password);
  25 | }

如何解决此错误？

Answer 1

您需要像在其他函数中一样将其绑定在构造函数中。在构造函数中添加：

this.signIn= this.signIn.bind(this);

Answer 2

您可以像这样将函数绑定到构造函数中

this.signIn= this.signIn.bind(this);

或更改signIn()函数以使用箭头功能

signIn = () => {

}

Answer 3

在按钮标签中更改

onClick={this.signIn} to {this.signIn.bind(this)}

或

在构造函数中，添加

this.signIn = this.signIn.bind(this)

Answer 4

以上代码中的错误是signIn函数缺少绑定。因为在此函数中，您尝试使用“ this”关键字访问状态变量。但是由于您没有在构造函数中绑定函数，因此缺少此作用域。在构造函数中添加以下行 this.signIn = this.signIn.bind（this）; 它会起作用。

您甚至可以尝试以下绑定方式 onClick = {this.signIn.bind（this）} 这不是推荐的绑定方式。

警报给出TypeError：这是未定义的

4 个答案: