イベント処理の書き方

「イベント」とは、ユーザーがWebページの要素に対して行った操作のことです。例えば、ボタンをクリックしたり、テキストボックスに文字を入力したり、画像にカーソルを合わせたり。こうした行動がイベントと呼ばれます。

また、これらのイベントが生じたときに何か実行させる処理のことを「イベントハンドラ」と呼びます。

①基本の書き方

基本構文

<要素 onClick={関数}>…</要素>

イベント名はキャメルケース(用語の意味)で書くのがポイントです。通常のHTMLでは「onclick」が正しい書き方ですが、JSX記法の場合は「onClick」が正しい書き方です。

実際の記述例

<button onClick={myFunction}>ボタン</button>

myFunction関数の部分は、自由な関数名で問題ありません。この例の場合は、ボタンをクリックしたときにmyFunctionの処理が実行されます。

複数のイベントを同時に書く例

下記のように、いくつかのイベントを同時に書くこともできます。

<button onClick={myFunction1} onMouseEnter={myFunction2} />ボタン>

関数名ではなく、アロー関数を直接書く例

簡単な処理であれば、わざわざ関数を作らなくとも、このようにアロー関数で書いたほうが楽な場合もあります。

<button onClick={() => alert("Hello, World!")}>ボタン</button>

②イベントハンドラへの引数の渡し方

<button onClick={myFunction(event)}>ボタン</button>