【React】エンターキーが押されたことを検知する方法

チャット画面を作成していたとき、エンターキーでテキスト入力エリアに入力したテキストを送信するという処理を行いたかったので、その方法について。
React と書いていますが、恐らく通常の JavaScript でも扱えるはず。

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

Reactでエンターキーのイベントを取得する方法 – 1日1%成長するブログ
http://masarufuruya.hatenadiary.jp/entry/2017/09/06/200551

さて、実装方法ですが、キー入力されたことは onKeyDown イベントで検知します。

<input type='text' onKeyDown={(e) => this.handleKeyDown(e)} />

上記は、なにかしらのキーが押された場合、その都度 handleKeyDown 関数が呼び出されます。

で、handleKeyDown 関数の中身は下記のとおりです。

handleKeyDown(e) {
  if (e.keyCode === 13) {
    // エンターキーが押された時の処理
  }
}

エンターキーは keyCode では 13 という数字が割り振られているとのことだったので、keyCode の値を見て判断します。
あとは、この if 文の中で、テキストを送信した際に行いたい処理を実行すればOKです。
非常に簡単でした！

以上、エンターキーが押されたかどうかを検知する方法でした。
なお、Androidの実機と iOS の Simulator でも動作確認を行いましたが、問題なく動作しました。
実行ボタンが無くなると、やはりレイアウトがすっきりする気がします。
是非、ご参考にしていただければと思います。