久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > React中事件的寫法總結(jié)

React中事件的寫法總結(jié)

來源:千鋒教育
發(fā)布人:qyf
時間: 2022-10-10 14:41:11 1665384071

  首先我們先查看官方規(guī)則或者官方文檔的介紹,React的事件處理和DOM元素很相似,但是語法上是有不同的:

  1、react事件采用駝峰命名法,而不是純小寫。

  駝峰命名法(camelCase):命名的全部全稱, 首個單詞全部小寫后面每個單詞的首字母大寫。

  eg: getElementById onClick

  2、使用JSX語法的時候需要傳入一個函數(shù)作為事件處理函數(shù), 而不是一個字符串

  了解基本的以后 , 下面我們利用九個例子來進(jìn)行事件的鞏固:

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

1

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

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

2

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

3

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

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

4

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

5

  可以彈框提示 , 但是會有this指向的問題 , 接下來 我們看第五步的加強

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

6

  點擊以后num就能得到改變

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

7

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

8

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

9

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

  方法的定義部分

10

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

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

11

  方法定義的地方

12

  9、改寫bind 貼近官方推薦寫法

13

  在show9定義中

14

  總結(jié):

  react中事件的使用和原生的事件使用極其相似,我們需要解決,函數(shù)函數(shù)的聲明和參數(shù)的傳遞 使用,根據(jù)自己的實際情況,合理使用就可以了,不管是箭頭函數(shù)和普通函數(shù),實際都是殊途同歸。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
大數(shù)據(jù)測試工程師需要具備哪些技能?

一、理解大數(shù)據(jù)概念大數(shù)據(jù)測試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲、MapReduce、實時計算等。他們還需要了解如何處理大規(guī)模的...詳情>>

2023-10-14 23:43:03
為什么SpringBoot的 jar 可以直接運行?

一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫,它是一種壓縮文件格式,可以將Java項目的類文件、資源文件以及依賴庫等...詳情>>

2023-10-14 23:01:49
站群服務(wù)器是什么?

站群服務(wù)器的含義與用途站群服務(wù)器主要用于支持站群,即由一組相互鏈接的網(wǎng)站組成的群體。這些網(wǎng)站通常由同一組織或個人擁有,并且經(jīng)常會互相鏈...詳情>>

2023-10-14 22:46:12
自編碼器是什么?

一、自編碼器原理自編碼器的設(shè)計靈感源于神經(jīng)科學(xué)中關(guān)于感知系統(tǒng)的認(rèn)知原理,它的核心思想是將輸入數(shù)據(jù)經(jīng)過編碼過程,形成一個隱藏層的特征表示...詳情>>

2023-10-14 22:41:10
什么是云網(wǎng)融合?

一、云網(wǎng)融合的定義云網(wǎng)融合是指將云計算與網(wǎng)絡(luò)技術(shù)相結(jié)合,實現(xiàn)資源的共享、業(yè)務(wù)的協(xié)同,將網(wǎng)絡(luò)與云端服務(wù)深度融合,提供更靈活、高效、安全的...詳情>>

2023-10-14 22:31:47