イベントハンドラ

イベント / イベントハンドラとは？

イベントハンドラというのは「Aが起きたときにBしてほしい」を設定するもの。

const Props = {
  onSubmit: () => void;
}

const MyComponent = (props) => {
...
}

よくあるミス

• e.g. 「Run test」ボタンがクリックされた時に、testConnection というメソッドを実行させたい
  • testConnection と命名
  • onConnectionTest と命名
  • この例では、一見「Aが起きたときにBしてほしい」のAを命名に使おうがBを命名に使おうがどちらも「テスト」に関わるため違和感がないかのように見える

しかし B を命名に使うのは実は誤りである -> testConnection も onConnectionTest も両方NG

原則

少なくとも js では、「Aが起きたときにBしてほしい」状況下でイベントハンドラの命名は on{Aが起きる} となるべき。

極端な例を挙げると、「カラスが鳴いたときに町を爆破する」場合、カラスコンポーネントのイベント名に town や bom を関与させるのはおかしい。

修正案

そのため、先の例では onTestInvoked や onTestFormSubmitted 等が相応しい。