HOWTO · React

React の Href onClick イベント

このチュートリアルでは、React で href onClick イベントを設定する方法について説明します。

著者 Md Aminul Islam公開日 2023-06-21更新日 2023-10-12
このページの内容

リンクをクリックしたときに、特定のアクションを実行する必要がある場合があります。 参照リンクに移動し、ボタンとして使用します。

React JS では、<a> ... </a> タグ内でのアクションの作成は、href で指定されたリンクに移動することなく簡単に作成できます。

この記事では、href を使用して <a> ... </a> タグのアクションを作成する方法を説明します。 また、トピックを簡単にするために、例と説明を使用して各ステップを確認します。

href を使用して <a> ... </a> タグで onClick アクションを作成する

<a> ... </a> タグに onClick 関数を作成するには、次の手順に従います。

  • まず、コンポーネントを保持する特定の <div> ... </div> 要素を作成する必要があります。 HTML は次のようになります。

    コード - index.html:

    <!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8" />
	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta
	  name="description"
	  content="Web site created using create-react-app"
	/>
	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
	<title>React App</title>
  </head>
  <body>
	<div id="root"></div>
  </body>
</html>
  • 次に、App.js ファイルに取り組む必要があります。 このファイルは次のようになります。

    コード - App.js:

    import './App.css';

function App() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('This is a link click action');
  }

  return (
	<a href='#' onClick={handleClick}>
	  Click me
	</a>
  );
}
export default App;

まず、import './App.css'; という行でリソースをインポートしました。 関数内で、リンクがクリックされたときのアクションを含むクリック イベント handleClick を作成します。

このクリック イベント内で、e.preventDefault(); 行を介して すべてのデフォルト アクションを無効にしました。 その後、アクション console.log('This is a link click action'); を作成しました。 リンクがクリックされたときにコンソールにメッセージが表示されます。

サンプルを実行すると、Web コンソールに以下のテキストが表示されます。

出力：

This is a link click action

この記事で共有するサンプル コードは、React JS プロジェクトで記述されています。 React プロジェクトを実行するには、システムに最新の Node JS バージョンが含まれている必要があります。

著者について

MD Aminul Islam

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

著者プロフィールを見る
LinkedIn