React の Href onClick イベント

Reactのリンククリックを処理するには、onClickプロパティに関数を渡します。遷移させるHTMLの<a>には意味のあるhrefを指定します。ハンドラーの実行後も通常はリンク先へ遷移し、event.preventDefault()を呼び出した場合にその遷移がキャンセルされます。

Reactでリンク（<a></a>）にonClickアクションを設定する

ハンドラーを定義し、その参照をアンカーのonClick={handleClick}として渡します。次の自己完結型のJavaScript例では、ハンドラーがメッセージを書き出します。Reactコンポーネントでは、同じ関数をアンカーのonClickの値として指定します。

function handleClick() {
  console.log("You clicked the link!");
}

handleClick();

ハンドラーが実行されると、例のメッセージがブラウザーのコンソールに表示されます。コンポーネントでは、アンカーを<a href="/account" onClick={handleClick}>Open account</a>のように記述します。hrefが遷移先を指定し、クリック時にReactがハンドラーを呼び出します。onClick={handleClick()}とは書かないでください。これはクリック時に関数を渡すのではなく、レンダリング中に関数を呼び出します。

通常、ハンドラーの実行後にブラウザーはアンカーのhrefへ遷移します。クリックで遷移せずに処理だけを行いたい場合は、イベントを受け取り、ハンドラー内でevent.preventDefault()を呼び出します。これにより、そのアンカーのナビゲーションはキャンセルされますが、ブラウザーのすべてのデフォルト動作がキャンセルされるわけではありません。ナビゲーションではない操作には、通常ボタンが適切です。

React RouterのLinkコンポーネントにonClickアクションを設定する

アプリケーションでReact Routerを使う場合、Linkコンポーネントがクライアントサイドのナビゲーションを処理します。遷移先をtoで指定し、onClickに同様のハンドラーを設定します。たとえば、<Link to="/account" onClick={handleClick}>Open account</Link>のように書きます。この例はルーターパッケージを使うフレームワーク固有のJSXであり、単独で実行できるコードではなく、記述例として示しています。

ハンドラーがログ出力や計測など、ナビゲーション前の処理だけを行うなら、preventDefault()を呼び出さずに処理を終えます。そうすれば、ルーターはtoで指定されたルートへ遷移できます。クリック後も現在のルートにとどめたい場合に限り、event.preventDefault()を呼び出します。HTMLアンカーではhrefを使い、React RouterのLinkではルートの遷移先にtoを使います。

Reactでアロー関数を使ってインラインにonClickアクションを設定する

一か所で使う短い処理なら、アロー関数をプロパティに直接記述できます。たとえば、<a href="/account" onClick={() => console.log("Opening account")}>Open account</a>のようにします。処理の後もアンカーはhrefのリンク先へ遷移します。その遷移を抑止するには、アロー関数でイベントを受け取り、意図的にevent.preventDefault()を呼び出します。

インラインハンドラーは、小規模でその場限りの処理を簡潔に記述できます。処理が長い場合、再利用する場合、またはJSXの外に書いたほうが理解しやすい場合は、名前付きハンドラーを使います。

まとめ

Reactのリンククリックに応答するには、onClickに関数を渡します。ブラウザーで遷移するHTMLアンカーにはhrefを、クライアントサイドのルート遷移にはReact RouterのLinkとtoを使います。操作の一部としてナビゲーションする場合はそのまま遷移させ、クリックによるリンクのデフォルトのナビゲーションをキャンセルしたい場合に限り、preventDefault()を呼び出します。