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

您的问题是您的this函数中的onSend()不是引用类，而是引用了调用该函数的元素（在您的情况下为Button元素）。

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

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

Answer 2

在类中将事件处理程序定义为非箭头函数（如onSend（））时，this关键字未绑定到组件的上下文。尝试以下任何一种方法：

1）绑定它，看起来您差不多完成了：

constructor(props){
  super()

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

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

2）将onSend（）转换为箭头函数。多亏了词法作用域，此关键字现在指向类组件本身的onSend所有者。

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

3）将this关键字绑定到事件处理程序内

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

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

2 个答案: