React.js 小書 Lesson9 - 事件監(jiān)聽

yanbingyun1990 發(fā)布于2019-08-21 17:33 / 1944人閱讀

摘要：在不需要手動(dòng)調(diào)用瀏覽器原生的進(jìn)行事件監(jiān)聽。沒有經(jīng)過特殊處理的話，這些的事件監(jiān)聽只能用在普通的的標(biāo)簽上，而不能用在組件標(biāo)簽上。的事件監(jiān)聽方法需要手動(dòng)到當(dāng)前實(shí)例，這種模式在中非常常用。下一節(jié)中我們將介紹小書組件的和。

React.js 小書 Lesson9 - 事件監(jiān)聽

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson9

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

在 React.js 里面監(jiān)聽事件是很容易的事情，你只需要給需要監(jiān)聽事件的元素加上屬性類似于 onClick、onKeyDown 這樣的屬性，例如我們現(xiàn)在要給 Title 加上點(diǎn)擊的事件監(jiān)聽：

class Title extends Component {
  handleClickOnTitle () {
    console.log("Click on title.")
  }

  render () {
    return (
      React 小書
    )
  }
}

只需要給 h1 標(biāo)簽加上 onClick 的事件，onClick 緊跟著是一個(gè)表達(dá)式插入，這個(gè)表達(dá)式返回一個(gè) Title 自己的一個(gè)實(shí)例方法。當(dāng)用戶點(diǎn)擊 h1 的時(shí)候，React.js 就會(huì)調(diào)用這個(gè)方法，所以你在控制臺(tái)就可以看到 Click on title. 打印出來。

在 React.js 不需要手動(dòng)調(diào)用瀏覽器原生的 addEventListener 進(jìn)行事件監(jiān)聽。React.js 幫我們封裝好了一系列的 on* 的屬性，當(dāng)你需要為某個(gè)元素監(jiān)聽某個(gè)事件的時(shí)候，只需要簡單地給它加上 on* 就可以了。而且你不需要考慮不同瀏覽器兼容性的問題，React.js 都幫我們封裝好這些細(xì)節(jié)了。

React.js 封裝了不同類型的事件，這里就不一一列舉，有興趣的同學(xué)可以參考官網(wǎng)文檔： SyntheticEvent - React，多嘗試不同的事件。另外要注意的是，這些事件屬性名都必須要用駝峰命名法。

沒有經(jīng)過特殊處理的話，這些 on* 的事件監(jiān)聽只能用在普通的 HTML 的標(biāo)簽上，而不能用在組件標(biāo)簽上。也就是說，

這樣的寫法不會(huì)有什么效果的。這一點(diǎn)要注意，但是有辦法可以做到這樣的綁定，以后我們會(huì)提及。現(xiàn)在只要記住一點(diǎn)就可以了：這些 on* 的事件監(jiān)聽只能用在普通的 HTML 的標(biāo)簽上，而不能用在組件標(biāo)簽上。

event 對(duì)象

和普通瀏覽器一樣，事件監(jiān)聽函數(shù)會(huì)被自動(dòng)傳入一個(gè) event 對(duì)象，這個(gè)對(duì)象和普通的瀏覽器 event 對(duì)象所包含的方法和屬性都基本一致。不同的是 React.js 中的 event 對(duì)象并不是瀏覽器提供的，而是它自己內(nèi)部所構(gòu)建的。React.js 將瀏覽器原生的 event 對(duì)象封裝了一下，對(duì)外提供統(tǒng)一的 API 和屬性，這樣你就不用考慮不同瀏覽器的兼容性問題。這個(gè) event 對(duì)象是符合 W3C 標(biāo)準(zhǔn)（ W3C UI Events ）的，它具有類似于event.stopPropagation、event.preventDefault 這種常用的方法。

我們來嘗試一下，這次嘗試當(dāng)用戶點(diǎn)擊 h1 的時(shí)候，把 h1 的 innerHTML 打印出來：

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(e.target.innerHTML)
  }

  render () {
    return (
      React 小書
    )
  }
}

再看看控制臺(tái)，每次點(diǎn)擊的時(shí)候就會(huì)打印”React 小書“。

關(guān)于事件中的 this

一般在某個(gè)類的實(shí)例方法里面的 this 指的是這個(gè)實(shí)例本身。但是你在上面的 handleClickOnTitle 中把 this 打印出來，你會(huì)看到 this 是 null 或者 undefined。

...
  handleClickOnTitle (e) {
    console.log(this) // => null or undefined
  }
...

這是因?yàn)?React.js 調(diào)用你所傳給它的方法的時(shí)候，并不是通過對(duì)象方法的方式調(diào)用（this.handleClickOnTitle），而是直接通過函數(shù)調(diào)用（handleClickOnTitle），所以事件監(jiān)聽函數(shù)內(nèi)并不能通過 this 獲取到實(shí)例。

如果你想在事件函數(shù)當(dāng)中使用當(dāng)前的實(shí)例，你需要手動(dòng)地將實(shí)例方法 bind 到當(dāng)前實(shí)例上再傳入給 React.js。

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this)
  }

  render () {
    return (
      React 小書
    )
  }
}

bind 會(huì)把實(shí)例方法綁定到當(dāng)前實(shí)例上，然后我們?cè)侔呀壎ê蟮暮瘮?shù)傳給 React.js 的 onClick 事件監(jiān)聽。這時(shí)候你再看看，點(diǎn)擊 h1 的時(shí)候，就會(huì)把當(dāng)前的實(shí)例打印出來：

你也可以在 bind 的時(shí)候給事件監(jiān)聽函數(shù)傳入一些參數(shù)：

class Title extends Component {
  handleClickOnTitle (word, e) {
    console.log(this, word)
  }

  render () {
    return (
      React 小書
    )
  }
}

這種 bind 模式在 React.js 的事件監(jiān)聽當(dāng)中非常常見，bind 不僅可以幫我們把事件監(jiān)聽方法中的 this 綁定到當(dāng)前組件實(shí)例上；還可以幫助我們?cè)谠阡秩玖斜碓氐臅r(shí)候，把列表元素傳入事件監(jiān)聽函數(shù)當(dāng)中——這個(gè)將在以后的章節(jié)提及。

如果有些同學(xué)對(duì) JavaScript 的 this 模式或者 bind 函數(shù)的使用方式不是特別了解到話，可能會(huì)對(duì)這部分內(nèi)容會(huì)有些迷惑，可以補(bǔ)充對(duì) JavaScript 的 this 和 bind 相關(guān)的知識(shí)再來回顧這部分內(nèi)容。

總結(jié)

為 React 的組件添加事件監(jiān)聽是很簡單的事情，你只需要使用 React.js 提供了一系列的 on* 方法即可。

React.js 會(huì)給每個(gè)事件監(jiān)聽傳入一個(gè) event 對(duì)象，這個(gè)對(duì)象提供的功能和瀏覽器提供的功能一致，而且它是兼容所有瀏覽器的。

React.js 的事件監(jiān)聽方法需要手動(dòng) bind 到當(dāng)前實(shí)例，這種模式在 React.js 中非常常用。

下一節(jié)中我們將介紹《React.js 小書 Lesson10 - 組件的 state 和 setState》。

GPU云服務(wù)器云服務(wù)器監(jiān)聽事件事件監(jiān)聽監(jiān)聽鍵盤事件 button監(jiān)聽事件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89665.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yanbingyun1990

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Linux系統(tǒng)又遇新威脅!PRISM后門新變種“水滴”可逃過病毒監(jiān)測

閱讀 2883·2021-09-01 10:30
JQ筆記

閱讀 1735·2019-08-30 15:52
仿stackoverflow highlight.js 選用哪種editor ？

閱讀 1045·2019-08-29 18:40
Css Sprite 圖片等比縮放圖片大?。╞ackground-size優(yōu)化Sprites圖顯示）

閱讀 1206·2019-08-28 18:30
JS騷操作之?dāng)?shù)組快速排序

閱讀 2451·2019-08-23 17:19
小程序云開發(fā)之初體驗(yàn)

閱讀 1402·2019-08-23 16:25
d3.js入門——selection與創(chuàng)建條形圖

閱讀 2803·2019-08-23 16:18
微信小程序發(fā)送模板消息！附前端+后端源碼~

閱讀 3059·2019-08-23 13:53

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

React.js 小書 Lesson9 - 事件監(jiān)聽

React 小書

React 小書

React 小書

React 小書

相關(guān)文章

React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹

React.js 小書 Lesson25 - 實(shí)戰(zhàn)分析：評(píng)論功能（四）

**寫一本關(guān)于 React.js 的小書**

React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作

React.js 小書 Lesson15 - 實(shí)戰(zhàn)分析：評(píng)論功能（二）

發(fā)表評(píng)論

0條評(píng)論

yanbingyun1990

男|高級(jí)講師

TA的文章

Linux系統(tǒng)又遇新威脅!PRISM后門新變種“水滴”可逃過病毒監(jiān)測

JQ筆記

仿stackoverflow highlight.js 選用哪種editor ？

Css Sprite 圖片等比縮放圖片大?。╞ackground-size優(yōu)化Sprites圖顯示）

JS騷操作之?dāng)?shù)組快速排序

小程序云開發(fā)之初體驗(yàn)

d3.js入門——selection與創(chuàng)建條形圖

微信小程序發(fā)送模板消息！附前端+后端源碼~

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

React.js 小書 Lesson9 - 事件監(jiān)聽

React 小書

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！