Javascript &引用；这"；React组件中的函数-请阅读代码末尾的行 class MyButton扩展组件{ 状态={tapped:false} tap（）{ this.setState（{tapped:true}）；//-->此处的“this”未定义 } render（）{ 返回( 轻拍我 ) } }

我知道使用ES6类React不会自动将其绑定到组件的实例，因此在内部点击“this”是未定义的。我不明白的是，为什么tap函数出现在组件的实例中，并且没有抛出一个错误，因为tap不存在？tap如何成为组件实例的一部分？

类MyButton扩展组件{
class MyButton extends Component {

    state = { tapped: false }
    tap() {
          this.setState({ tapped: true });  // --> 'this' here is undefined 
    }
    render() {
        return (
             <button onClick={ this.tap }>TAP ME</button>
        )
    }
}

状态={tapped:false}
点击=（）=>{
this.setState（{tapped:true}）；
}
render（）{
返回(
轻拍我
)
}
}

它显然给了我一个未定义的错误：因为代码抛出了一个未定义的错误，所以被否决。我知道在函数内部它将是未定义的。我想知道为什么这个.tap是组件。tap不是未定义的。tap。使用此函数调用组件实例中的正确函数。tap@AkashVerma你是在问“为什么

这个
在
onClick={this.tap}
上没有定义？”@Prakashsharma是的。不相关，但是如果有“很多”，请小心在组件中使用箭头FN“因为它们是跨实例复制的。这就是为什么人们把他们绑在ctor里的原因之一。是的，你是对的。无论如何，我更喜欢SFC
class MyButton extends Component {

    state = { tapped: false }

    tap = () => {
          this.setState({ tapped: true }); 
    }

    render() {
        return (
             <button onClick={ this.tap }>TAP ME</button>
        )
    }
}