React中的this指向和事件绑定的四种方法

export default class App extends Component {
    a = 100
    render() {
        return (
            <div>
                <p>四种事件绑定的却别</p>
                <button onClick={() => {
                    console.log('事件绑定1', this.a)
                }}>事件绑定一</button>

                {/* 这两种可以说是一种  只是对应的函数声明的方式不同罢了 */}
                {/* 函数声明方式不同 就导致了 this的指向也不同 */}
                {/* 箭头函数的  指向正常  是因为箭头函数 的this指向 和其所在的作用域的this指向保持一致 */}
                {/* 而 普通函数的this指向  是和谁调用  指向谁有关 */}
                {/* 在React中  所有的事件绑定  都采用事件代理的模式  绑定在root根组件上  所以 自然 在调用的时候 this会指向root根组件 */}
                <button onClick={this.handleClick2.bind(this)}>事件绑定二</button>
                <button onClick={this.handleClick3}>事件绑定三</button>


                {/* 唯一能传参的 */}
                <button onClick={() => this.handleClick4()}>事件绑定四</button>
            </div>
        )
    }
    handleClick2() {
        console.log('事件绑定2', this.a);
    }

    //在React中event  是以evt的形式再调用的时候 就已经存在函数里面了 
    handleClick3 = (evt) => {
        console.log('事件绑定3', this.a, evt.target);
    }

    handleClick4() {
        console.log('事件绑定4', this.a);
    }
}