【React】FormでEnterキーが押されてSubmitするのを防ぐ

import { useForm } from "react-hook-form";

const App = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data: any) => console.log(data);

  const handleKeyDown = (e: { key: string; preventDefault: () => void }) => {
    if (e.key === "Enter") {
      e.preventDefault();
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} onKeyDown={handleKeyDown}>
      <input {...register("example")} />
      <input type="submit" />
    </form>
  );
};

export default App;

formタグにonKeyDownを追加し、Enterキーが押されたらevent.preventDefault()でsubmitをキャンセルしている。

eslintでonKeyDownのエラーが表示されたら// eslint-disable-next-line〜でエラーを無視すればOK。

流石にinput要素全てにonKeyDownを追加するのは面倒だし漏れがありそうなのでformタグに追加する方がいいと思う。