当前位置: 首页 / 技术干货 / 正文
好程序员web前端培训React中事件的写法总结

2020-04-28

好程序员 web前端培训

  好程序员web前端培训React中事件的写法总结React的事件处理和DOM元素很相似,但是语法上是有不同的:

web前端4

1、react事件采用驼峰命名法,而不是纯小写。
驼峰命名法(camelCase):命名的全部全称, 首个单词全部小写后面每个单词的首字母大写。
eg: getElementById onClick 
2、使用JSX语法的时候需要传入一个函数作为事件处理函数, 而不是一个字符串

了解基本的以后 下面我们利用九个例子来进行事件的巩固:

1、普通匿名函数的直接绑定

<button onClick={function(){alert('直接绑定')}}>按钮1</button>

onClick后面直接绑定函数,点击以后,就会执行函数里面的内容。

2、使用箭头函数代替匿名的绑定

<button onClick={()=>{

       alert("点击触发匿名函数");

}}>按钮2</button> 

3、箭头函数中获取事件源(等同于原生的event对象)

<button onClick={(e)=>{

      e.target.style.color="red";

}}>点击以后按钮就会变成红色</button> 

e就是默认的事件参数 e中的target表示事件发生的目标元素 点击以后按钮就会变成红色

4、将匿名函数分离封装

<button onClick={

        this.show}>点击调用外面的函数</button>

点击按钮以后 触发外面声明的show方法 show方法定义如下

  constructor(props){

        super(props);

        this.state={

            num:10

        }

    }

 

    show(){

            alert("按钮4被点击 但是里面this会脱离上下文关系");

            alert(this.state.num);//报错 this是undefined    }

可以弹框提示 但是会有this指向的问题 , 接下来 我们看第五步的加强

5、利用箭头函数 对this指向进行加强 改写的代码如下

<button onClick={

         this.show//参数问题就看第六点}>调用函数</button>

 

点击以后num就能得到改变

6、再来研究箭头函数中参数的问题 如果调用的时候带走参数

<button onClick={//show6能带参数

        ()=>{

              this.show6("我是参数")

         }

}>调用带有参数的函数</button>

方法定义的如下 show6为一个箭头函数, content就是形参 ,接受的值为我是参数

 show6=(content)=>{

        alert(content);

 }

7、事件函数触发是带参数和事件源

  <button onClick={//show7能带参数 还能带事件源

         (e)=>{

               this.show7("7777",e);

         }

  }>带走参数和事件源</button>

 

show7中第二个参数e需要特别处理, 在(e)中声明 才能带出去, 不然e会是没有定义。

方法的定义部分

  show7=(content,e)=>{

        e.target.innerHTML= content;

  }

content就是参数"7777" ,e就是事件源, 通过事件源可以找到目标元素, 然后更新里面的内容

8、不使用箭头函数 使用bind加强(bind里面的第一个参数 表示bind前面函数声明里面this的指向)

<button onClick={this.show8.bind(this)}>bind加强</button>

方法定义的地方

 show8(){

        alert("bind绑定");

 }

9、改写bind 贴近官方推荐写法

  <button onClick={this.show9} >bind写法</button>

show9定义中

 constructor(props){

        super(props);

        this.state={

            num:10

        }

        this.show9 = this.show9.bind(this);//bind的提升 调用的写法和8就不一样了    }

    show9(){

        alert(this.state.num);

    }

  总结:

  react中事件的使用和原生的事件使用极其相似,我们需要解决,函数函数的声明和参数的传递 使用,根据自己的实际情况,合理使用就可以了,不管是箭头函数和普通函数,实际都是殊途同归。

 

好程序员公众号

  • · 剖析行业发展趋势
  • · 汇聚企业项目源码

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2021-04-12(深圳)

    开班盛况

    开班时间:2021-05-17(北京)

    开班盛况
  • 大数据+人工智能 <高端班>

    开班时间:2021-03-22(杭州)

    开班盛况

    开班时间:2021-04-26(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2021-05-10(北京)

    开班盛况

    开班时间:2021-02-22(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2019-07-22(北京)

    开班盛况
IT培训IT培训
在线咨询
IT培训IT培训
试听
IT培训IT培训
入学教程
IT培训IT培训
立即报名
IT培训

Copyright 2011-2023 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公网安备 11010802035720号