本篇內(nèi)容主要講解“React中事件的寫法有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“React中事件的寫法有哪些”吧!

創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)蘭坪,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

1、普通匿名函數(shù)的直接綁定

<button >

給onClick后面直接綁定函數(shù)，點(diǎn)擊以后，就會執(zhí)行函數(shù)里面的內(nèi)容。

2、使用箭頭函數(shù)代替匿名的綁定

<button onClick={()=>{

       alert("點(diǎn)擊觸發(fā)匿名函數(shù)");

}}>按鈕2</button> 

3、箭頭函數(shù)中獲取事件源(等同于原生的event對象)

<button onClick={(e)=>{

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

}}>點(diǎn)擊以后按鈕就會變成紅色</button> 

e就是默認(rèn)的事件參數(shù) e中的target表示事件發(fā)生的目標(biāo)元素 點(diǎn)擊以后按鈕就會變成紅色

4、將匿名函數(shù)分離封裝

<button onClick={

        this.show}>點(diǎn)擊調(diào)用外面的函數(shù)</button>

點(diǎn)擊按鈕以后 觸發(fā)外面聲明的show方法 show方法定義如下

  constructor(props){

        super(props);

        this.state={

            num:10

        }

    }

    show(){

            alert("按鈕4被點(diǎn)擊 但是里面this會脫離上下文關(guān)系");

            alert(this.state.num);//報(bào)錯(cuò) this是undefined    }

可以彈框提示 ， 但是會有this指向的問題 ， 接下來 我們看第五步的加強(qiáng)

5、利用箭頭函數(shù) 對this指向進(jìn)行加強(qiáng) 改寫的代碼如下

<button onClick={

         this.show//參數(shù)問題就看第六點(diǎn)}>調(diào)用函數(shù)</button>

點(diǎn)擊以后num就能得到改變

6、再來研究箭頭函數(shù)中參數(shù)的問題 如果調(diào)用的時(shí)候帶走參數(shù)

<button onClick={//show6能帶參數(shù)

        ()=>{

              this.show6("我是參數(shù)")

         }

}>調(diào)用帶有參數(shù)的函數(shù)</button>

方法定義的如下 show6為一個(gè)箭頭函數(shù)， content就是形參 ，接受的值為我是參數(shù)

 show6=(content)=>{

        alert(content);

 }

7、事件函數(shù)觸發(fā)是帶參數(shù)和事件源

  <button onClick={//show7能帶參數(shù) 還能帶事件源

         (e)=>{

               this.show7("7777",e);

         }

  }>帶走參數(shù)和事件源</button>

show7中第二個(gè)參數(shù)e需要特別處理， 在(e)中聲明 才能帶出去， 不然e會是沒有定義。

方法的定義部分

  show7=(content,e)=>{

        e.target.innerHTML= content;

  }

content就是參數(shù)"7777" ，e就是事件源， 通過事件源可以找到目標(biāo)元素， 然后更新里面的內(nèi)容

8、不使用箭頭函數(shù) 使用bind加強(qiáng)(bind里面的第一個(gè)參數(shù) 表示bind前面函數(shù)聲明里面this的指向)

<button onClick={this.show8.bind(this)}>bind加強(qiáng)</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的提升 調(diào)用的寫法和8就不一樣了    }

    show9(){

        alert(this.state.num);

    }

到此，相信大家對“React中事件的寫法有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文名稱：React中事件的寫法有哪些
本文來源：http://aaarwkj.com/article6/igggog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、自適應(yīng)網(wǎng)站、移動網(wǎng)站建設(shè)、服務(wù)器托管、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)