【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タグに追加する方がいいと思う。