好程式設計師web前端培訓React中事件的寫法總結

　　好程式設計師 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中事件的使用和原生的事件使用極其相似，我們需要解決，函式函式的宣告和引數的傳遞 使用，根據自己的實際情況，合理使用就可以了，不管是箭頭函式和普通函式，實際都是殊途同歸。