今天要講到的是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方法來進行綁定。