Alert给出TypeError:这是未定义的

我正在使用一个反应应用程序create-app,我正在制作一个注册表单,它现在只有两个字段用于电子邮件,一个用于密码.

我正在进行一个简单的测试,我希望通过使用警报来显示我输入的值,如下所示:

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 (
      
                
 Please sign in 
                 Email address
                
                 Password
                
                 Sign in 
      
    );
  }
}

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

如何修复此错误？

您需要在构造函数中绑定它,就像使用其他函数一样.在构造函数中添加:

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