【React】Input要素にテキスト入力後Enterキー押下で処理を実行する

久しぶりに Web のプロジェクトのプログラミングを行ったのですが、その時実装したコードについてまとめ。
タイトル通り、Input 要素にフォーカスが当たっている状態で Enter キーを押下した時、特定の処理を実行する方法についてです。
たとえば、検索欄にキーワード入力後、検索ボタンをクリックするのではなく、Enter キー押下で検索処理を実行したいときに使います。
というか、正に上記の挙動を実装しました。

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

ReactでInputフォームのEnterキーで処理を行う | freks blog
https://blog.freks.jp/react-submit-with-enter/

実装には、onKeyPress() を使います。
サンプルコードは下記のとおりです。

pressEnter(e) {
  if (e.key == 'Enter') {
    // 実行したい処理を記述
  }
}

上記のコードで、押下されたキーが Enter キーかどうかを判定しています。
で、こちらの関数を、下記のように Input 要素の onKeyPress() に指定します。

<Input
  name="search"
  onKeyPress={this.pressEnter}
/>

こうすることで、押下されたキーが Enter キーの場合のみ、検索処理などの特定の処理を実行することができます。
なお、参考サイトのサンプルコードでは、Enter キーだった場合に実行する処理の前に e.preventDefault() を追加しなければ正常に動作しないとのことでした。
ですが私の環境では特になくても動くようだったので省略しています。
こちらについては、一度実際に動作させてみて追加するかどうかを判断してください。

処理としては以上です！
思ったよりも簡単に実装出来ました。

以上、React で Input 要素にフォーカスが当たっている時に、Enter キー押下で特定の処理を実行する方法でした。
ご参考になれば幸いです。