ReactでEnterキーでサブミットする方法

フロントエンドのメモ書き。

結論としては極力formタグを使ったほうが良さそう。

formタグを使う

推奨パターン。

const App = () => {
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      // なんらかfetchしたりサブミットするコード
    }}>
      <input />
    </form>
  )
}

onKeyDownでEnterキーの処理する

IME予測変換のEnterでsubmitされないようにするため、 isComposing を使って予測変換中かどうかを判定しないといけない。が、Safariでは以下のコードではうまく処理できない。

import { useState } from 'react'

const App = () => {
  const [isComposing, setIsComposing] = useState(false);

  return (
    <input
      // nativeEvent.isComposingを使う以外にもonCompositionStart/EndでもOK
      // onCompositionStart={() => setIsComposing(true)}
      // onCompositionEnd={() => setIsComposing(false)}
      onKeyDown={(e) => {
        if (e.key === "Enter" && !e.nativeEvent.isComposing) {
          // なんらかfetchしたりサブミットするコード
        }
      }}
    />
  )
}

非推奨ではあるが e.keyCode を使うとisComposingなしで動く＝Safariでも動く

const App = () => {
  return (
    <input
      onKeyDown={(e) => {
        if (e.keyCode === 13) {
          // なんらかfetchしたりサブミットするコード
        }
      }}
    />
  )
}