绑定事件的方式

2022-02-28 14:00:22 阅读：118 来源： 互联网

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}，这不是我们所希望看到的，我们的需求是点击按钮才执行函数，所以千万不要加小括号。

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

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

标签：console,函数,方式,绑定,箭头,事件,写法,log
来源： https://www.cnblogs.com/xiaoqi11/p/15945293.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

绑定事件的方式