Reactでエンターキーのイベントを取得する方法

onEnterは存在しない

Reactがサポートしているイベントは以下の公式サイトに記載されています。

facebook.github.io

onClick のノリで onEnterは無いのかな？と探してみてもありません。 ただし、代わりになるキーイベントがあります。

onKeyDownを使う

それが onKeyDown です。Propertiesを見ると、keyCodeが取得できるので この値を判定すればエンターキーを判定できます。

https://facebook.github.io/react/docs/events.html#keyboard-events

キーイベントをJSXから受け取る

<textarea onKeyDown={  (e) => props.onKeyDown(e) } />

後はこんな感じでpropsで受け取ったイベントハンドラにイベントオブジェクトを引数で渡して実行します。

keyCode === 13で判定する

if (e.keycode === 13) {
  // エンターキー押した時の処理
}

あとはkeycodeの中身を判定するだけですね。簡単です。