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