onClick

タグをクリックした際に、処理を走らせるようにするのに、onClick属性に行いたい処理をセットすることで可能です。BreadCrumbコンポーネントのaタグをクリックした際に、その要素をコンソールに出力するには、以下のように記述します。

BreadCrumb.tsx◎

...
        <ol className="breadcrumb">
          {items.map((item) => (
            <li key={item} className="breadcrumb-item">
              <a href="#" onClick={() => console.log(item)}>
                {item}
              </a>
            </li>
          ))}
        </ol>
...

上記の記述にて、各リンクをクリックした際に、コンソールにて出力されるようになるかと思います。

また、onClickの関数の引数にイベント型の値を受け取ることができ、onClickが作動したタグの要素の様々なプロパティを参照することができます。実際にイベント型を出力するようにしましょう。

BreadCrumb.tsx◎

...
        <ol className="breadcrumb">
          {items.map((item) => (
            <li key={item} className="breadcrumb-item">
              <a href="#" onClick={(event) => console.log(event)}>
                {item}
              </a>
            </li>
          ))}
        </ol>
...

コンソールに以下のようなオブジェクトが表示されるかと思います。

onClickに定義するようなメソッドに関してですが、基本的に関数として定義し、呼び出すのが良いかと思います。

その際に、引数に型を定義しないとエラーとなります。こちらの引数の型を定義するために、aタグのonClickのeventにホバーすると、肩が表示されますので、MouseEventという型でジェネリクスに、HTMLAnchorElement(aタグの型)を格納します。

呼び出し時に関しては、onClick={(event) => handleClick(event)}と記述する必要がありますが、(event) => handleClick(event)の左側のeventと右側の関数のeventが同じの場合は、onClick={handleClick}と省略することができます。

BreadCrumb.tsx◎

import { MouseEvent } from "react";

export const Breadcrumb = () => {
  const items = ["Home", "Library", "Date"];

  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
      console.log(event);
  }

  return (
    <>
      <p>パンくずリスト</p>
      {items.length === 0 ? (
        <p>itemがありません。</p>
      ) : (
        <p>itemが{items.length}あります</p>
      )}
      <nav aria-label="breadcrumb">
        <ol className="breadcrumb">
          {items.map((item) => (
            <li key={item} className="breadcrumb-item">
              <a href="#" onClick={handleClick}>
                {item}
              </a>
            </li>
          ))}
        </ol>
      </nav>
    </>
  );
};