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

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

formタグを使う

推奨パターン。

const App = () => {
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      console.log(123);
    }}>
      <input />
    </form>
  )
}

export default App

onKeyDownでEnterキーの処理する

IME予測変換のEnterでsubmitされないようにするため、onCompositionStart, onCompositionEndを使って予測変換中かどうかを判定しないといけない。また、SafariではisCompositionを処理できない様子。

import { useState } from 'react'

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

  return (
    <input
      onCompositionStart={() => setIsComposing(true)}
      onCompositionEnd={() => setIsComposing(false)}
      onKeyDown={(e) => {
        if (e.key === "Enter" && !isComposing) {
          console.log(123);
        }
      }}
    />
  )
}

export default App