【React】テキスト要素にフォーカスが当たった/外れたときに特定の処理を実行する方法

今後も使いそうな処理なので、備忘録としてまとめ。
React で、テキスト要素にフォーカスが当たった、もしくはフォーカスが外れた事を検知し、そのときに特定の処理を実行する方法です。
なお、タイトルには React とありますが、JavaScript でも使用できます。

今回参考にさせていただいた記事はこちら。

[JavaScript] フォーカス・アウト イベントを取得する（onBlur） – コピペで使える JavaScript逆引きリファレンス
https://javascript.programmer-reference.com/js-event-onblur/

さて、早速コードはこちら。
必要なところだけ抜粋してます。

onFocusFunc() {
  // フォーカスが当たったときの処理
}
onBlurFunc() {
  // フォーカスが外れたときの処理
}

render() {
  return (
    <input type='text' onFocus={() => this.onFocusFunc()} onBlur={() => this.onBlurFunc()} />
  );
}

コードといってもこれだけです。
あとは各関数に、フォーカスが当たった時/外れたときの処理を記述してください。
なお、onFocus と onBlur は、全て小文字ではなく、キャメルケースになっているのでお気をつけください。
素の HTML だと全て小文字なので、うっかり間違えそうです。

処理としては全く複雑なことはしていないのですが、フォーカスが外れたときに発火する onBlur を忘れそうだったので、まとめました。
onFocus はそのままの名前なのでわかりやすいのですが、onBlur って少し覚えにくい…。
なお、blur は「ぼかし」という意味があるようです。…ますますわかりにくい気がするのは私だけでしょうか…。
とにかく、忘れないように気をつけます。

以上、React でテキスト要素にフォーカスが当たった/外れたときに特定の処理を実行する方法でした。