今天要學習如何在React中處理事件，以下是今天會提到的內容：

• 如何設定事件處理器
• 如何在事件處理器當中讀取props屬性資料
• 將事件處理器作為props 傳給 元件
• 幫事件處理器props命名

設定/追加事件處理器

還記得我們在學習JavaScript時是透過DOM 來處理事件讓頁面達到跟使用者互動的功能。在JS當中我們使用的為addEventListener 來監聽事件。而在React則在元素上使用onClick。

基本上有以下的幾種方法，而它們都是相等的：

1. 另外定義event handlers function 並將其視為props傳至element

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

2. 在onClick中定義function

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

3. 在onClick當中使用arrow function

<button onClick={() => {
  alert('You clicked me!');
}}>

注意點！

function必須傳入事件處理器當中，而不是呼叫funciton。

Inline的格式也是相同

在事件處理器當中讀取該元件的props屬性資料

在React中，事件處理器通常在元件內部被宣告，所以它們可以訪問該元件的props，以及元件的狀態（state）和其他內部變數。state的部份我們後續會談到，這次的例子會先來看pops是如何在事件處理器當中被讀取的。

function AlertButton({ message, children }) {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="Playing!">
        Play Movie
      </AlertButton>
      <AlertButton message="Uploading!">
        Upload Image
      </AlertButton>
    </div>
  );
}

在這段程式碼，事件處理器可以訪問到AlertButton 元件的props message。

將事件處理器作為props 傳給 元件

這邊有兩個按鈕，一個是「播放影片」、一個是「上傳圖片」。

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`Playing ${movieName}!`);
  }

  return (
    <Button onClick={handlePlayClick}>
      Play "{movieName}"
    </Button>
  );
}

function UploadButton() {
  return (
    <Button onClick={() => alert('Uploading!')}>
      Upload Image
    </Button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="Kiki's Delivery Service" />
      <UploadButton />
    </div>
  );
}

理解程式碼

在這串程式碼當中分別有四個元件，Button、PlayButton、UploadButton、該如何理解這四層元件的關係呢？

畫個圖來看看：

          +----------------------+
          |       Toolbar        |
          +----------------------+
          |                      |
    +-----v------+        +------v------+
    | PlayButton |        | UploadButton|   （擁有Button）
    +------------+        +-------------+
    |            |        |             |
    |   Button   |        |    Button   |   （接收onClick prop）
    |            |        |             |
    +------------+        +-------------+

這四個元件形成了一個層次結構，Button 元件為通用元件，為PlayButton 和 UploadButton 元件，提供了一個通用的按鈕外觀和點擊事件處理的結構，以便這兩個特化元件（PlayButton 和 UploadButton）可以重用它的外觀和點擊事件處理邏輯。

而 PlayButton 和 UploadButton 元件分別是基於 Button 元件的特化（訂製）版本。Toolbar 元件是最外層的元件，它包含了兩個子元件，分別是 PlayButton 和 UploadButton。

事件處理器

關鍵的事件處理器則是設定在PlayButton 和 UploadButton 上，你可以看到在通用元件的 Button的 props為Button({ onClick, children }) 這樣一來Button 元件即「接收」作為props的事件處理器了。

事件處理器props的命名

在React中，內建的HTML元素（Built-in components）（如<button>和<div>）僅支援瀏覽器事件命名，像是我們這邊使用onClick 。但如果是在要造的的元件，事件處理器的「props」可以隨我們命名。也就是在JSX上的元素依然要維持onClick，但事件處理器作為props則可以叫另一個名字。

但慣例上，還是盡量取on開頭的名稱，譬如：onInputChange、onToggleSwitch、onPlayMovie 、onUploadImage等。

這樣子的命名可以在一些情況下增添可讀性，以及後續可以依據他們的功能性修改命名來達到更高的靈活度。

參考資料

1. React官方文件 - Responding to Events