React の Href onClick イベント
リンクをクリックしたときに、特定のアクションを実行する必要がある場合があります。 参照リンクに移動し、ボタンとして使用します。
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 バージョンが含まれている必要があります。
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