TypeError：这是未定义的“反应”[重复]

Question

出现类型错误，但是当我使用 onClick={()=>this.clickHandler()} 时，它就像魅力一样。那么当我使用 onClick={()=>this.clickHandler()} 时发生了什么，以及为什么我通过编写 onClick={this.clickHandler} 得到错误p>

constructor(props){
        super(props)
    }
    render() {
        return (
            <div>
                <button onClick={this.clickHandler}>Class click</button>
                {/* <button onClick={()=>this.clickHandler()}>Class click</button> */}
            </div>
        )
    }

    clickHandler(){
        this.logPrint()
    }
    logPrint(){
        console.log("click the button");

    }

Answer 1

对事件处理程序使用箭头函数，它们会自动绑定 this：

clickHandler = () => {
    this.logPrint()
}

Answer 2

实现这一目标的两种方法

使用箭头函数

clickHandler: () => {

}

在构造函数中与组件的this绑定方法

constructor(props){
    super(props);
    this.clickHandler = this.clickHandler.bind(this);
}