【React】onClickとhandleClickの違い・使いどころ

ReactにおけるonClickとhancleClickの違いについて

TypeScriptとNext.jsを使ったWebアプリケーション制作にチャレンジしていますが、それ以外にもReact構文を頻繁に使う機会があるため、Reactもしっかり学ぶ必要性があると感じました。

Reactの関数コンポーネントを実装するなかで疑問に思った点として、ロジックを複数の処理に分けて実装するという点です。

まず理解できていない点としてonClickとhandleClick。ボタンを押したときに数字がカウントアップするようなロジックを作りたいとき、onClickで関数hendleClickに渡し、実際のカウントアップの処理はhandleClickで表現する、、、。みたいな実装方法を行う場面があります。

なぜ、ボタンをクリック〜数字カウントアップという2つの挙動を実現するために、2つの関数コンポーネントに分ける必要があるのか？という疑問があります。

この疑問は今後、幾度となく訪れる場面があると想定されるため、きちんと理解して腹落ちした状態にしておきたいと思い、よくよく調べることにしました。

本記事の執筆者はエンジニア未経験。Ruby on Railsなどのバックエンドを中心に学んできましたが、昨今のフロントエンドにおけるReact・TypeScriptなどのモダンJavaScript系の技術の重要度を鑑みて、これらの学習を進めています。

onClickとhandleClickの違い

onClickとhandleClickの違いについて、まずはそれぞれの特徴を確認していきます。

onClick

onClickはボタンなどをクリックしたタイミングで特定のアクションを発火させるトリガーとしての役割を担うために用いられる事が一般的であるようです。

正確にはreturn文の中で用いられ、buttonタグなどで扱う事ができるプロパティ（要素）として存在します。

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

handleClick

handleClickは、ハンドルの名の通り、クリックしたときに「どんなアクションを」起こすかを定義するさいに用いられるメソッド・関数の命名として用いられます。

onClickはトリガー／ handleClickはアクション

以上を踏まえると、onClickはイベント発火のトリガーとしての役割を担い、具体的なアクションの内容はhandleClickで担う。というような使い所の違いがあるという事ですね。

イベントへの応答の認識を改める

例えば、このような記述をした場合、「渡す」「呼び出す」のどちらなのかという点において、私は認識を誤っていたようです。

<button onClick={handleClick}>

• handleClickを渡す⭕️
• handleClickを呼び出す❌

onClickで指定したhandleClickは、渡すという表現が正しいようです。ボタンをクリックしたときに、その反応としてhancleClick関数が発火し、アクションが発動するという挙動となります。微妙な言葉の違いですが、正しく理解することで後々の学習や実装で誤った理解が大きな失敗につながらないよう、うまく言語化できるように心がけたいですね。

イベントハンドラーは他にもいっぱいある

handleClickはクリックした時に何かをするというアクションを定義したいときに用いるイベントハンドラーでありますが、他にもイベントハンドラーはReactにて複数用意されています。

• onChange　フォームの入力値や選択肢に変更があったときに起きるイベントを定義する。
• onMousemove マウスを動かしているときに何か視覚効果をつけたいなどのイベントを定義するときに使う。
• onSelect / onSelectStart ページがリロードされたときや、ページが切り替わるタイミングでアクションを起こしたいときに使用するイベントハンドラー。

などなど.....

公式ドキュメントでチャレンジ問題ができる

公式ドキュメントにはイベントへの応答に関する実装例などを中心に、理解を深められる解説が多く掲載されています。また、チャレンジ問題も用意されているので、イベント処理に対する理解を深めるためにチャレンジしてみても良いでしょう。

参考サイト