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

import React,{Component} from "react";


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

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

   hanleClick4() {
        console.log('click4');
    }
}

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

第二种方法，onClick绑定hanleClick2函数，注意这里不能加小括号， 在{ }里面代表的是js，如果加 （）就是函数执行，那么就会出现还没有点击按钮就会执行这个函数，而执行函数我们的结果是这个函数的返回值，就相当于 {undefined}，这不是我们所希望看到的，我们的需求是点击按钮才执行函数，所以千万不要加小括号。

第三种写法，写法上和第二种很相似，只不过函数方式变成了箭头函数

第四种写法，比较推荐这种写法，箭头函数会等到点击按钮之后执行，然后自动执行函数