Reactのイベントハンドラについて

Reactのイベントハンドラについて調べたことをメモ。

サンプルコード

例として、Button.jsxというボタンのコンポーネントを用意しました。
内容は以下の通りです。

export default function Button() {
  return (
    <button>ボタン</button>
  )
}

ここにイベントハンドラを追加してみます。

export default function Button() {
  function handleClick() {
    alert('アラート');
  }

  return (
    <button onClick={handleClick}>ボタン</button>
  )
}

これでボタンをクリックすると、「アラート」というalertが表示されるようになりました。
注意点として、Reactの場合は「onclick」ではなく「onClick」のようにキャメルケースでの指定になります。
また、イベントハンドラはイベント名の先頭に「handle」が付き、その後ろにイベントの名称を繋げた名前にするという慣習があるようです。

次にpropsを設定して、ボタンのラベルやalertの内容を親コンポーネントから設定できるようにしてみます。

export default function Button({ alertText = 'アラート', children = 'ボタン' }) {
  function handleClick() {
    alert(alertText);
  }

  return (
    <button onClick={handleClick}>
      {children}
    </button>
  )
}

コンポーネントの呼び出しは以下のようにします。

<Button
  alertText = {'送信しました'}
>
  送信
</Button>

これで「送信」というラベルのボタンで、クリックすると「送信しました」というalertが出るようになりました。

次にイベントハンドラをpropsで渡せるようにしてみます。
例として、「お気に入りに登録」ボタンと「カートに入れる」ボタンを配置して、それぞれでクリック時に異なる処理を行う想定で試してみます。
まずButton.jsxでイベントハンドラを受け取れるようにします。

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

propsのonClickというプロパティで受け取れるようにしました。
次にお気に入りに登録ボタン(FavoriteButton.jsx)とカートに入れるボタン(CartButton.jsx)をそれぞれコンポーネントで用意します。
まずはFavoriteButton.jsxです。

import Button from './Button.jsx'

function handleFavoriteClick() {
  alert('お気に入りに登録しました');
}

export default function FavoriteButton() {
  return (
    <>
      <Button
        onClick = {handleFavoriteClick}
      >
        お気に入りに登録
      </Button>
    </>
  )
}

handleFavoriteClickというイベントハンドラを用意して、Button.jsxに渡すようにしています。

CartButton.jsxも同様に設定します。

import Button from './Button.jsx'

function handleCartClick() {
  alert('カートに追加しました');
}

export default function CartButton() {
  return (
    <>
      <Button
        onClick = {handleCartClick}
      >
        カートに入れる
      </Button>
    </>
  )
}

これでボタンのコンポーネントの準備ができたので、それぞれのコンポーネントを呼び出せばOKです。

<FavoriteButton />
<CartButton />

これでボタンの内容毎にイベントを設定できるようになりました。