React中事件绑定 事件函数this指向问题

React中事件绑定 事件函数this指向问题

// 引入react模块
import react from "react";

// 创建一个模块
class Hello extends react.Component {

    // 解决this指向问题第二种解决办法,通过es5中的bind方法,将事件处理程序中的this与组件实例绑定在一起
    /* constructor(){
        super()
        this.add = this.add.bind(this);
        this.state = {
            num:0
        }
    } */
    /* add(){
        this.setState({
            num:this.state.num+1
        })
        // console.log(this);
    } */
    state = {
        num: 0
    }
    render() {
        return (
            <div>
                {/* 解决this指向问题第一种解决办法,箭头函数指定事件 */}
                {/* <button onClick={()=>this.add()}>+</button> 计数器:{this.state.num} */}
                <button onClick={this.add}>+</button> 计数器:{this.state.num}
            </div>
        )
    }
 
    // 第三种解决办法:通过箭头函数
    add = () => {
        this.setState({
            num: this.state.num + 1
        })
    }
}

// 导出组件
export default Hello