監(jiān)聽(tīng)事件只需要給需要監(jiān)聽(tīng)事件的元素加上屬性類似于 onClick、onKeyDown 這樣的屬性。
我們現(xiàn)在要給 Title 加上點(diǎn)擊的事件監(jiān)聽(tīng)
class Title extends Component {
handleClickOnTitle () {
console.log('click on title')
}
render () {
return (
<h1 onClick = {this.handleClickOnTitle}>React 小書(shū)</h1>
)
}
}
只需要給 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è)方法.
沒(méi)有經(jīng)過(guò)特殊處理的話，這些 on~ 的事件監(jiān)聽(tīng)只能用在普通的 HTML 的標(biāo)簽上，而不能用在組件標(biāo)簽上。也就是說(shuō)，<Header onClick={…} /> 這樣的寫(xiě)法不會(huì)有什么效果的。
event對(duì)象
這次嘗試當(dāng)用戶點(diǎn)擊 h1 的時(shí)候，把 h1 的 innerHTML 打印出來(lái)：
class Title extends Component {
handleClickOnTitle (e) {
console.log(e.target.innerHTML)
}
render () {
return (
<h1 onClick = {this.handleClickOnTitle}>React 小書(shū)</h1>
)
}
}
和普通瀏覽器一樣，事件監(jiān)聽(tīng)函數(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 和屬性，這樣你就不用考慮不同瀏覽器的兼容性問(wèn)題。這個(gè) event 對(duì)象是符合 W3C 標(biāo)準(zhǔn)的，它具有類似于event.stopPropagation、event.preventDefault 這種常用的方法。
This
一般在某個(gè)類的實(shí)例方法里面的 this 指的是這個(gè)實(shí)例本身。但是在上面的 handleClickOnTitle 中把 this 打印出來(lái)，會(huì)看到 this 是 undefined。
這是因?yàn)?React.js 調(diào)用你所傳給它的方法的時(shí)候，并不是通過(guò)對(duì)象方法的方式調(diào)用（this.handleClickOnTitle），而是直接通過(guò)函數(shù)調(diào)用 （handleClickOnTitle），所以事件監(jiān)聽(tīng)函數(shù)內(nèi)并不能通過(guò) 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('click on title')
console.log(e.target.innerHTML)
console.log(this)
}
render () {
return (
<h1 onClick = {this.handleClickOnTitle.bind(this)}>React 小書(shū)</h1>
)
}
}
bind 會(huì)把實(shí)例方法綁定到當(dāng)前實(shí)例上，然后我們?cè)侔呀壎ê蟮暮瘮?shù)傳給 React.js 的 onClick 事件監(jiān)聽(tīng)。這時(shí)候點(diǎn)擊 h1 的時(shí)候，就會(huì)把當(dāng)前的實(shí)例打印出來(lái)：
總結(jié)
為 React 的組件添加事件監(jiān)聽(tīng)是很簡(jiǎn)單的事情，你只需要使用 React.js 提供了一系列的 on* 方法即可。
React.js 會(huì)給每個(gè)事件監(jiān)聽(tīng)傳入一個(gè) event 對(duì)象，這個(gè)對(duì)象提供的功能和瀏覽器提供的功能一致，而且它是兼容所有瀏覽器的。
React.js 的事件監(jiān)聽(tīng)方法需要手動(dòng) bind 到當(dāng)前實(shí)例，這種模式在 React.js 中非常常用。
