React.js 小書 Lesson9 - 事件監聽

yanbingyun1990 發布于2019-08-21 17:33 / 1884人閱讀

摘要：在不需要手動調用瀏覽器原生的進行事件監聽。沒有經過特殊處理的話，這些的事件監聽只能用在普通的的標簽上，而不能用在組件標簽上。的事件監聽方法需要手動到當前實例，這種模式在中非常常用。下一節中我們將介紹小書組件的和。

React.js 小書 Lesson9 - 事件監聽

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

轉載請注明出處，保留原文鏈接以及作者信息

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

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

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

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

只需要給 h1 標簽加上 onClick 的事件，onClick 緊跟著是一個表達式插入，這個表達式返回一個 Title 自己的一個實例方法。當用戶點擊 h1 的時候，React.js 就會調用這個方法，所以你在控制臺就可以看到 Click on title. 打印出來。

在 React.js 不需要手動調用瀏覽器原生的 addEventListener 進行事件監聽。React.js 幫我們封裝好了一系列的 on* 的屬性，當你需要為某個元素監聽某個事件的時候，只需要簡單地給它加上 on* 就可以了。而且你不需要考慮不同瀏覽器兼容性的問題，React.js 都幫我們封裝好這些細節了。

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

沒有經過特殊處理的話，這些 on* 的事件監聽只能用在普通的 HTML 的標簽上，而不能用在組件標簽上。也就是說，

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

event 對象

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

我們來嘗試一下，這次嘗試當用戶點擊 h1 的時候，把 h1 的 innerHTML 打印出來：

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

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

再看看控制臺，每次點擊的時候就會打印”React 小書“。

關于事件中的 this

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

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

這是因為 React.js 調用你所傳給它的方法的時候，并不是通過對象方法的方式調用（this.handleClickOnTitle），而是直接通過函數調用（handleClickOnTitle），所以事件監聽函數內并不能通過 this 獲取到實例。

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

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

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

bind 會把實例方法綁定到當前實例上，然后我們再把綁定后的函數傳給 React.js 的 onClick 事件監聽。這時候你再看看，點擊 h1 的時候，就會把當前的實例打印出來：

你也可以在 bind 的時候給事件監聽函數傳入一些參數：

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

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

這種 bind 模式在 React.js 的事件監聽當中非常常見，bind 不僅可以幫我們把事件監聽方法中的 this 綁定到當前組件實例上；還可以幫助我們在在渲染列表元素的時候，把列表元素傳入事件監聽函數當中——這個將在以后的章節提及。

如果有些同學對 JavaScript 的 this 模式或者 bind 函數的使用方式不是特別了解到話，可能會對這部分內容會有些迷惑，可以補充對 JavaScript 的 this 和 bind 相關的知識再來回顧這部分內容。

總結

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

React.js 會給每個事件監聽傳入一個 event 對象，這個對象提供的功能和瀏覽器提供的功能一致，而且它是兼容所有瀏覽器的。

React.js 的事件監聽方法需要手動 bind 到當前實例，這種模式在 React.js 中非常常用。

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

云服務器 GPU云服務器監聽事件事件監聽監聽鍵盤事件 button監聽事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89665.html

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

摘要：小書最后頁面會顯示內容組件可以和組件組合在一起，組件內部可以使用別的組件。當頁面結構復雜起來，有許多不同的組件嵌套組合的話，組件樹會相當的復雜和龐大。下一節中我們將介紹小書事件監聽。 React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson8 轉載請注明出處，保留...

AbnerMing 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson25 - 實戰分析：評論功能（四）

摘要：接下來是實戰環節，我們會繼續上一階段的例子，把評論功能做得更加復雜一點。把已經發布的評論持久化，存放到瀏覽器的中。評論顯示發布日期，如秒前，分鐘前，并且會每隔秒更新發布日期。事件監聽方法，。下一節中我們將介紹小書實戰分析評論功能五。 React.js 小書 Lesson25 - 實戰分析：評論功能（四）本文作者：胡子大哈本文原文：http://huziketang.com/book...

mozillazg 2019-08-21 17:33 評論0 收藏0
寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作

摘要：多余的操作其實是代碼里面的噪音，不利于我們理解和維護。下一節中我們將介紹小書和容器類組件。 React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson21 轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huziketan...

Gemini 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson15 - 實戰分析：評論功能（二）

摘要：例如，上面設置了的為，在中被初始化為空字符串。如何向傳遞的數據父組件只需要通過給子組件傳入一個回調函數。當用戶點擊發布按鈕的時候，調用中的回調函數并且將傳入該函數即可。下一節中我們將介紹小書實戰分析評論功能三。 React.js 小書 Lesson15 - 實戰分析：評論功能（二）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/les...

siberiawolf 2019-08-21 17:34 評論0 收藏0