イベント処理の書き方
「イベント」とは、ユーザーがWebページの要素に対して行った操作のことです。例えば、ボタンをクリックしたり、テキストボックスに文字を入力したり、画像にカーソルを合わせたり。こうした行動がイベントと呼ばれます。
また、これらのイベントが生じたときに何か実行させる処理のことを「イベントハンドラ」と呼びます。
①基本の書き方
React.jsでのイベントハンドラの書き方はこちらです。
基本構文
<要素 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>- キャメルケースとは
単語の先頭を大文字にする書き方。
アッパー
キャメルケース
パスカルケースすべての単語の先頭を大文字にする
CamelCaseローワー
キャメルケース先頭の単語だけ小文字にして、それ以外の単語の先頭を大文字にする
camelCase