React イベント

React は、HTML DOM イベントと同様に、ユーザーの操作（イベント）に応じて特定のアクションを実行できます。
React には、click、change、mouseover など、HTML と同様のイベントが用意されています。

1. イベントの追加

React のイベントは、キャメルケース（camelCase）構文で記述します。
例えば、HTML の onclick は、React では onClick となります。

また、React のイベントハンドラーは波括弧 { } の中に記述します。
HTML のように onclick="shoot()" と記述するのではなく、onClick={shoot} のように指定します。

React:

<button onClick={shoot}>シュートを打つ！</button>

HTML:

<button onclick="shoot()">シュートを打つ！</button>

1.1 実装例

shoot 関数を Football コンポーネントの内部に定義する例を見てみましょう。

function Football() {
  const shoot = () => {
    alert("ナイスシュート！");
  }

  return (
    <button onClick={shoot}>シュートを打つ！</button>
  );
}

createRoot(document.getElementById('root')).render(
  <Football />
);

2. 引数の受け渡し

イベントハンドラーに引数を渡したい場合は、アロー関数（Arrow function）を使用します。

2.1 実装例

アロー関数を使用して、shoot 関数にパラメータとして "ゴール！" という文字列を渡す例です。

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    // アロー関数の中で関数を呼び出し、引数を渡す
    <button onClick={() => shoot("ゴール！")}>シュートを打つ！</button>
  );
}

createRoot(document.getElementById('root')).render(
  <Football />
);

3. React イベントオブジェクト

イベントハンドラーは、その関数をトリガーした React のイベントオブジェクト（Event Object）にアクセスすることができます。
今回の例では、イベントは "click" イベントになります。

3.1 実装例

アロー関数を使用して、イベントオブジェクトを手動で送信する例です。

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
    /*
    'b' はこの関数をトリガーした React イベントを表します。
    この例では 'click' イベントとなります。
    */
  }

  return (
    // 第2引数としてブラウザのイベントオブジェクトを渡す
    <button onClick={(event) => shoot("ゴール！", event)}>シュートを打つ！</button>
  );
}

createRoot(document.getElementById('root')).render(
  <Football />
);

React のイベントシステムは SyntheticEvent（合成イベント） と呼ばれ、ブラウザ間の仕様差を吸収してくれるため、一貫したインターフェースで開発を進めることが可能です。