绑定事件的方式

react中有以下4种方式进行绑定事件，但是也会有对应的写法的限制。注意：使用的react版本是17.0.2可能写法和以前不太一样

import React,{Component} from "react";


export default class App extends Component{
    a=100;
    render(){
        return(
            <div>
                <input type="text"></input>
                {/* 1 */}
                <button onClick={ ()=>{
                    console.log('click1',this.a);
                }}>add1</button>

                {/* 2 */}
                <button onClick={ this.hanleClick2.bind(this) }>add2</button>
                {/* 3 */}
                <button onClick={this.hanleClick3}>add3</button>
                {/* 4 */}
                <button onClick={ ()=>{
                    this.hanleClick4()
                }}>add4</button>
            </div>
        )
    }
    hanleClick2(){
        console.log('click2',this);
    }
    hanleClick3=()=>{
        console.log('clcik3',this.a);
    }

   hanleClick4() {
        console.log('click4',this.a);
    }
}

第一种方法，绑定了一个箭头函数，我们都知道一般this的指向是 谁调用就指向谁，但是在箭头函数里面，this的指向是和最外层的this保持一致，在这里也就是 指向最外层的APP类。第一种写法如果逻辑处理不是很多的话，可以这样写。而且因为是箭头函数，里面的this是可以访问到 a 的值的。

第二种方法，onClick绑定hanleClick2函数，注意这里不能加小括号， 在{ }里面代表的是js，如果加 （）就是函数执行，那么就会出现还没有点击按钮就会执行这个函数，而执行函数我们的结果是这个函数的返回值，就相当于 {undefined}，这不是我们所希望看到的，我们的需求是点击按钮才执行函数，所以千万不要加小括号。但是这种方法在函数hanleClick2里面打印this是undefined，所以函数里面也获取不到a的值。（正常情况下tihs都指向window 而class里面只能指向class不能指向window 所以当this方向发生改变不指向class时 this指向就会丢失就成了未定义解决方法）。可以使用 call bind apply解决this的指向问题：

var obj1={
    name:"obj1",
    // getName:function (){
    //     console.log(this.name);
    // }
    getName(){
        console.log(this.name); 
    }
}

var obj2={
    name:"obj2",
    getName:function (){
        console.log(this.name);
    }
}

call bind apply三者都是可以改变this的指向，却有不同
call和apply：改变this指向，call的第一个参数就是this的指向，并且可以自动调用函数，以下getName并没有加小括号但是却执行了打印结果

obj1.getName.call(obj2)

bind：改变this指向为第一个参数，但是不自动调用函数，需要手动调用

obj1.getName.bind(obj2)()

第三种写法，写法上和第二种很相似，只不过函数方式变成了箭头函数。函数定义成箭头函数，在函数体里面就不用担心this指向丢失的问题，但是这种方法有弊端就是没有办法传参。

第四种写法，比较推荐这种写法，箭头函数会等到点击按钮之后执行，然后自动执行函数。这种方法因为是在箭头函数里面用this，所以解决了this指向问题，而且也能传递参数。所以比较推荐这个写法。

注意，只有使用()自己调用的，才能谁调用this就指向谁