資訊專欄INFORMATION COLUMN
摘要：在不需要手動調用瀏覽器原生的進行事件監(jiān)聽。沒有經(jīng)過特殊處理的話，這些的事件監(jiān)聽只能用在普通的的標簽上，而不能用在組件標簽上。的事件監(jiān)聽方法需要手動到當前實例，這種模式在中非常常用。下一節(jié)中我們將介紹小書組件的和。
React.js 小書 Lesson9 - 事件監(jiān)聽
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson9
轉載請注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
在 React.js 里面監(jiān)聽事件是很容易的事情，你只需要給需要監(jiān)聽事件的元素加上屬性類似于 onClick、onKeyDown 這樣的屬性，例如我們現(xiàn)在要給 Title 加上點擊的事件監(jiān)聽：
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 進行事件監(jiān)聽。React.js 幫我們封裝好了一系列的 on* 的屬性，當你需要為某個元素監(jiān)聽某個事件的時候，只需要簡單地給它加上 on* 就可以了。而且你不需要考慮不同瀏覽器兼容性的問題，React.js 都幫我們封裝好這些細節(jié)了。
React.js 封裝了不同類型的事件，這里就不一一列舉，有興趣的同學可以參考官網(wǎng)文檔： SyntheticEvent - React，多嘗試不同的事件。另外要注意的是，這些事件屬性名都必須要用駝峰命名法。
沒有經(jīng)過特殊處理的話，這些 on* 的事件監(jiān)聽只能用在普通的 HTML 的標簽上，而不能用在組件標簽上。也就是說，
和普通瀏覽器一樣，事件監(jiān)聽函數(shù)會被自動傳入一個 event 對象，這個對象和普通的瀏覽器 event 對象所包含的方法和屬性都基本一致。不同的是 React.js 中的 event 對象并不是瀏覽器提供的，而是它自己內部所構建的。React.js 將瀏覽器原生的 event 對象封裝了一下，對外提供統(tǒng)一的 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），而是直接通過函數(shù)調用 （handleClickOnTitle），所以事件監(jiān)聽函數(shù)內并不能通過 this 獲取到實例。
如果你想在事件函數(shù)當中使用當前的實例，你需要手動地將實例方法 bind 到當前實例上再傳入給 React.js。
class Title extends Component {
handleClickOnTitle (e) {
console.log(this)
}
render () {
return (
React 小書
)
}
}
bind 會把實例方法綁定到當前實例上，然后我們再把綁定后的函數(shù)傳給 React.js 的 onClick 事件監(jiān)聽。這時候你再看看，點擊 h1 的時候，就會把當前的實例打印出來：
你也可以在 bind 的時候給事件監(jiān)聽函數(shù)傳入一些參數(shù)：
class Title extends Component {
handleClickOnTitle (word, e) {
console.log(this, word)
}
render () {
return (
React 小書
)
}
}
這種 bind 模式在 React.js 的事件監(jiān)聽當中非常常見，bind 不僅可以幫我們把事件監(jiān)聽方法中的 this 綁定到當前組件實例上；還可以幫助我們在在渲染列表元素的時候，把列表元素傳入事件監(jiān)聽函數(shù)當中——這個將在以后的章節(jié)提及。
如果有些同學對 JavaScript 的 this 模式或者 bind 函數(shù)的使用方式不是特別了解到話，可能會對這部分內容會有些迷惑，可以補充對 JavaScript 的 this 和 bind 相關的知識再來回顧這部分內容。
總結為 React 的組件添加事件監(jiān)聽是很簡單的事情，你只需要使用 React.js 提供了一系列的 on* 方法即可。
React.js 會給每個事件監(jiān)聽傳入一個 event 對象，這個對象提供的功能和瀏覽器提供的功能一致，而且它是兼容所有瀏覽器的。
React.js 的事件監(jiān)聽方法需要手動 bind 到當前實例，這種模式在 React.js 中非常常用。
下一節(jié)中我們將介紹《React.js 小書 Lesson10 - 組件的 state 和 setState》。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/89665.html
摘要：小書最后頁面會顯示內容組件可以和組件組合在一起，組件內部可以使用別的組件。當頁面結構復雜起來，有許多不同的組件嵌套組合的話，組件樹會相當?shù)膹碗s和龐大。下一節(jié)中我們將介紹小書事件監(jiān)聽。 React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson8 轉載請注明出處，保留...
摘要：接下來是實戰(zhàn)環(huán)節(jié)，我們會繼續(xù)上一階段的例子，把評論功能做得更加復雜一點。把已經(jīng)發(fā)布的評論持久化，存放到瀏覽器的中。評論顯示發(fā)布日期，如秒前，分鐘前，并且會每隔秒更新發(fā)布日期。事件監(jiān)聽方法，。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能五。 React.js 小書 Lesson25 - 實戰(zhàn)分析：評論功能（四） 本文作者：胡子大哈本文原文：http://huziketang.com/book...
摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經(jīng)驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業(yè)簡單的入門級別的小書，提供給社區(qū)。本書的后續(xù)可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協(xié)議進行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉載請注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...
摘要：多余的操作其實是代碼里面的噪音，不利于我們理解和維護。下一節(jié)中我們將介紹小書和容器類組件。 React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson21 轉載請注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huziketan...
摘要：例如，上面設置了的為，在中被初始化為空字符串。如何向傳遞的數(shù)據(jù)父組件只需要通過給子組件傳入一個回調函數(shù)。當用戶點擊發(fā)布按鈕的時候，調用中的回調函數(shù)并且將傳入該函數(shù)即可。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能三。 React.js 小書 Lesson15 - 實戰(zhàn)分析：評論功能（二） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/les...
閱讀 2799·2021-09-01 10:30
閱讀 1689·2019-08-30 15:52
閱讀 978·2019-08-29 18:40
閱讀 1134·2019-08-28 18:30
閱讀 2404·2019-08-23 17:19
閱讀 1332·2019-08-23 16:25
閱讀 2710·2019-08-23 16:18
閱讀 2987·2019-08-23 13:53
