reactjs - 从反应将函数传递给子组件，将其显示为未定义

Question

在我的代码中我有

....
setPin = (pin) => {
    console.log(this.state)
    this.setState({pin})
}
return (
  <div>
   {console.log("this.props --",this.setPin)}
   <ReactKeyboard isNumberOnly onChange={this.setpin} />
  </div>    
)

ReactKeyboard 是子组件，它有按钮，所以点击我回调 onChange 函数。

但

在控制台中，我可以看到{console.log("this.props --",this.setPin)}函数的输出，而在子组件中我有

keyPress(key){
      const { onChange } = {...this.props};
      console.log("onChange",onChange)
      console.log("props",this.props)
      onChange(key);
    };

在这里会抛出 onChange 不起作用的错误，如果我在控制台中检查 onChange 是未定义的。

为什么这样 ？父显示函数值正确但在子显示未定义？

控制台输出是

我们可以检查 child 中的 props 是否具有未定义的功能

---

我现在得到

Uncaught TypeError: this.setpin is not a function

标签： reactjscallback

Answer 1

制作keyPress为箭头功能。

keyPress = key => {
    const { onChange } = this.props;
    console.log("onChange",onChange);
    console.log("props",this.props);
    onChange(key);
};