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

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

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

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