イベントへの応答

イベントハンドラ

クリック、フォーム入力といったユーザ操作に対して応答し取りがされる独自関数のことを イベントハンドラ と呼ぶ：

export default function Button() {
  function handleClick() {
    alert("hogehoge");
  }

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

上記の handleClick() がイベントハンドラで、props として <button> タグに渡している。イベントハンドラは次のように記述する：

通常、コンポーネント内部で定義
イベント名の先頭に handle をつけた名前にする（慣習的に onイベント名というハンドラ名にする。インラインで定義することも可能。）

重要なのは ハンドラ を渡すことで、ハンドラを呼び出すことではない。
(正：onClick={handleClick}、誤：onClick={handleClick()})

慣習的に独自のイベント名は on で始まるものにする。

イベントオブジェクト

イベントハンドラはイベントオブジェクトを唯一の引数として受け取り、慣習的に e （event）と言う変数で受け取る。

イベントオブジェクトで次のようなこともできる：

伝搬の停止

イベントオブジェクトは伝搬の停止にも使用できる。親への伝搬を停止する際には e.stopPropagation() を呼び出す：

  function Button({ onClick, children }) {
    return (
      <button onClick={e => {
        e.stopPropagation();
        onClick();
      }}>
    );
  }

デフォルト動作の防止

ブラウザのイベントには <form> タグのようにボタンクリック時にページ全体のリロードを実行するものがある。SPA とかだとリロードなどはやめてほしい状況がある。そうしたときには e.preventDefault() を呼び出す：

  export default function Signup() {
    return (
      <form onSubmit={e => {
        e.preventDefault();
        alert('Submitting!');
      }}>
        <input />
        <button>Send</button>
      </form>
    );
  }

state：コンポーネントのメモリ

コンポーネントでデータ更新するために必要なこと

コンポーネントのデータ更新を行うには次のことが必要：

レンダー間でデータを保持する（state変数）
変数を更新し、React がコンポーネントを再度レンダーするようにトリガする（state セッタ関数）

state 変数にデータを保持して、値更新はセッタ関数で行う。ローカル変数の変更はレンダーのトリガにならないので注意。

state は次のようにして使う：

import { useState } from "react";

const [index, setIndex] = useState(0); // state 変数の定義。index を 0 で初期化している

function handleClick() {
  setIndex(index + 1); // state 変数の更新
}

useState 関数からは常に 2 個の要素が返される。2回目以降のレンダーでは、React が state が更新されていることを覚えているので、useState(0) は更新されたオブジェクトを返す。（[0, setIndex]は返らない）

state セット関数にはコールバック関数が渡せる

state セット関数にはコールバック関数が渡せ、そのコールバックには前の変数値（前回値）が渡される。

それを利用して、コールバック関数内では前の状態を利用して新しい状態を計算することができる。

const [count, setCount] = useState(0);

const increment = () => {
  setCount(prevCount => prevCount + 1); // <= コールバック関数を渡す（前の変数値を利用して新しい状態を計算）
};

// ...

<button onClick={increment}>Increment</button>

上記の例では、コールバック関数の実行結果が setCount により count を計算する。コールバック関数内では、前回値を利用して新しい値を計算する。

フックとは

React の useState やその他の use で始まる関数のことをフック（Hook）と呼ぶ。フックは React がレンダーされているときにだけ使える特別な関数で、さまざまな React の機能に『接続（Hook into）』して使用できるため、フックと呼ばれる。

フックは、コンポーネントのトップレベルもしくはカスタムフック内（組み込みでないもの）でしか呼び出せないので注意。

goruchan’s blog

React：イベントハンドラと state