iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Modern Web

用Gatsby.js做出一個簡單的部落格系列 第 5

Day5. React的基本用法 (四)

今天要講到的是react中的事件監聽,在react中,只要在JSX的元素標籤內,根據特定方法給出的屬性名,給予其所需執行的方法,就會在事件觸發時做執行了,舉個例子,我們把index.js之前的東西清理一下:

import React from "react"

export default () => {
  function clickHandler() {
    alert('clicked!!');
  }
  return(
  <div> 
    <button onClick={clickHandler}>button</button>
  </div>
)}

值得注意的有兩件事:

  • 設定監聽的屬性名稱必須是駝峰式命名法,這是JSX的寫法,為了跟原本的onclick等做區別。
  • 設定的內容必須是方法名稱,若是直接在裡面放js程式碼,那它會在你觸發事件前就執行,且不會監聽,簡單講,就是要把事件跟方法綁在一起~

例如以下的例子就會出問題:

import React from "react"

export default () => (
  <div> 
    <button onClick={alert('clicked')}>button</button>
  </div>
)

另一種情況是,我們在裡面寫了this,像這樣:

import React from "react"

export default () => {
  function clickHandler() {
    alert('clicked!!');
  }
  return(
  <div> 
    <button onClick={this.clickHandler}>button</button>
  </div>
)}

上面這個例子也會報錯,原因是當我們用了this,它抓不到clickHandler這個方法,原因是它抓到的應該是觸發事件的元素本身,也就是button的按鈕,而非外層的箭頭函式。
而若是想把參數綁到事件監聽的函式上時,可以用bind方法來進行綁定。


上一篇
Day4. React的基本用法 (三)
下一篇
Day6. React的基本用法 (五)
系列文
用Gatsby.js做出一個簡單的部落格28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
yne711520
iT邦見習生 ‧ 2019-09-10 22:51:02

謝謝你!

0
hannahpun
iT邦新手 4 級 ‧ 2019-09-17 13:23:14

我也常用這種做法 當 function 內需要有參數時
onClick={() => clickHandler('click')}

感謝分享噢

我要留言

立即登入留言