javascript - 无法读取未定义状态的属性

Question

单击按钮时出现无法读取未定义属性“状态”的情况。这是我的作品

constructor(props){
  super()

  this.state = {
    email:"",
    guestName:"",
    staffName:"",

  };
   this.onSend = this.onSend.bind()
}


  onSend(){
      let val = this.state
      console.log(val)
  }
render(){
return(
<Button variant="contained" color="primary" className={"send"} onClick={this.onSend}>
        Send
      </Button>)
   }  

我错过了什么？

Answer 1

您的问题是 onSend() 函数中的 this 并不引用该类，而是引用调用该函数的元素(在您的情况下为 >按钮元素)。

要解决此问题，您可以将函数更改为箭头函数，如下面的代码所示，或者您可以使用 .bind(this) 绑定(bind) this 引用(类) >(所以onClick={this.onSend.bind(this)})

constructor(props){
  super()

  this.state = {
    email:"",
    guestName:"",
    staffName:"",   
  };
}

onSend = () => {
    let val = this.state
    console.log(val)
}

render(){
  return(
    <Button variant="contained" color="primary" className={"send"} onClick={this.onSend}>
        Send
    </Button>)
 }