事件監(jiān)聽
在React.js中監(jiān)聽并不是一件很難的事情,我們只需在監(jiān)聽事件的元素加上屬性on click
等等這樣的屬性就可以了过椎。
我們只需要在h1標簽上加上onClick事件鸳君,然后onClick后面是一個表達式的插入凭峡,這個表達式返回組件
Hello
的一個方法胜宇。在這里只要用戶每點擊一次標題,控制臺就會輸出你點擊了一下我亮隙!
。
在 React.js 不需要手動調(diào)用瀏覽器原生的 addEventListener 進行事件監(jiān)聽垢夹。React.js 幫我們封裝好了一系列的 on* 的屬性溢吻,當你需要為某個元素監(jiān)聽某個事件的時候,只需要簡單地給它加上 on* 就可以了果元。而且你不需要考慮不同瀏覽器兼容性的問題促王,React.js 都幫我們封裝好這些細節(jié)了。
但是需要注意的是這些事件屬性名都必須要用駝峰命名法噪漾。
event對象
與普通瀏覽器一樣硼砰,事件監(jiān)聽函數(shù)會自動傳入一個event對象,這個對象和普通瀏覽器的event對象所包含的方法和屬性基本一致欣硼。但是React.js中的event對象并不是瀏覽器所提供的题翰,而是它內(nèi)部所構(gòu)建的。
我們來看一下诈胜,當用戶點擊h1
的時候豹障,h1
的inHTML
也就是這是一個標題!就會在控制臺打印出來焦匈。
關(guān)于事件中的this
一般在某個類的實例方法里面的this指的是這個實例本身血公。但是在下面的這個例子中直接把this給打印出來,你看到會是null或者是undefined缓熟。
這是因為 React.js 調(diào)用你所傳給它的方法的時候累魔,并不是通過對象方法的方式調(diào)用(this.handleOnClick),而是直接通過函數(shù)調(diào)用 (handleOnClick)够滑,所以事件監(jiān)聽函數(shù)內(nèi)并不能通過 this 獲取到實例垦写。
如果你想在事件函數(shù)當中使用當前的實例,你需要手動地將實例方法 bind 到當前實例上再傳入給 React.js彰触。