React Hook Form 中正确阻止表单默认提交行为的方法

此外，你的 handleAddNewItem 函数签名也需调整：

• 它只接收解析后的表单数据（data: Record），不接收 Event 参数；
• React Hook Form 已完成事件拦截与数据转换，传入的是纯净的字段值对象。

修正后的完整逻辑如下：

function NewItemModal() {   const { register, handleSubmit } = useForm();    // ✅ 正确：仅接收校验通过的数据对象，无需 Event 参数   const handleAddNewItem = (data: Record<String, any>) => {     console.log("提交数据：", data);     // 这里可发起 API 请求、更新状态等，页面不会刷新   };    return (     <form onSubmit={handleSubmit(handleAddNewItem)} className="space-y-8">       {/* 表单字段保持不变，仅修改 onSubmit 绑定方式 */}       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 place-items-center gap-y-6">         <label className="space-y-1">           <h4>ID:</h4>           <input             type="text"             className="border border-raisin rounded indent-1 outline-none"             {...register("item_id")}           />         </label>         {/* 其他字段...（结构同原代码） */}       </div>       <div className="px-4 py-1 space-y-6 flex flex-col">         <label className="space-y-3 flex flex-col items-center">           <h4 className="self-start">Descrição:</h4>           <textarea             className="p-2 w-full h-56 outline-none border border-raisin rounded text-sm"             {...register("description")} // ✅ 建议为 textarea 添加 register           />         </label>         <div className="flex justify-end">           <button type="submit" className="bg-princeton px-2 w-20 h-8 rounded border-2 border-raisin">             Enviar           </button>         </div>       </div>     </form>   ); }  export default NewItemModal;

? 关键注意事项：

• 永远不要在 onSubmit 中自行调用 e.preventDefault() —— 这是反模式，不仅冗余，还易引发事件链断裂；
• handleSubmit 返回的是一个符合 React.FormEventHandler 类型的函数，必须直接赋值给 onSubmit，不可二次包装；
• 若需访问原始事件（极少数场景，如读取 event.target 特定属性），可通过 handleSubmit 的第二个参数实现：

  handleSubmit(handleAddNewItem, (errors) => console.log(errors))(event); // 不推荐常规使用

  但绝大多数业务中，你只需要干净的数据对象。

? 总结：React Hook Form 的“零配置防刷新”能力依赖于正确的事件绑定方式。牢记口诀：onSubmit={handleSubmit(yourHandler)} —— 简洁即正确，封装即安全。