本記事では、Reactでクリックされた時に特定の処理を実行する方法について解説しています。
Reactの学習におすすめ参考書
モダンJavaScriptの基本から始める React実践の教科書
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!
Contents
clickイベントの使い方
クリックされた時に特定の処理を実行したい時は、clickイベントを使用します。基本的な使い方は以下のとおりです。
function App() {
// ②
const clickFunc = () => /* クリック後に実行したい処理を記述 */;
return (
<>
{/* ① */}
<button onClick={clickFunc}>クリックしてね!</button>
</>
);
}
コード解説
- クリックイベントを設定したいHTMLタグに対して、onClickをセットします。{}の中にはクリックされた時に実行させたい関数を指定します。
- ①の{}の中に指定した関数名を定義し、クリック後に実行させたい処理を記述します。
サンプルコード
クリックイベントを使用したサンプルコードを用意したので、動作確認してみましょう。内容は、ボタンをクリックするとコンソールログに「ボタンがクリックされました!」と表示されます。
function App() {
const onIncrementBtnClicked = (e) => {
console.log("ボタンがクリックされました!");
};
return (
<>
<button onClick={onIncrementBtnClicked}>クリックしてね!</button>
</>
);
}
export default App;