为何我的React Hook Form提交时仍会刷新页面？

你的代码中，不需要在handleSubmit的回调里手动调用e.preventDefault()——React Hook Form的handleSubmit函数内部已经自动处理了表单的默认提交行为（即页面刷新），你额外添加的这个调用不仅多余，还可能因为执行顺序问题导致预期外的情况。

修正后的代码 #

'use client'
import * as React from 'react';
import { useForm } from "react-hook-form"
import Box from '@mui/material/Box';

export default function App() {
    const { register, handleSubmit } = useForm();

    const onSubmit = (data: { firstName: string; lastName: string }) => {
        console.log(data);
        // 在这里添加你的表单处理逻辑，比如发送请求到后端
    };
  
    return (
        <Box sx={{ pt: 15 }}>
            <form onSubmit={handleSubmit(onSubmit)}>
                <input {...register("firstName")} placeholder='First Name' />
                <input {...register("lastName")} placeholder='Last Name' />
                <input type='submit' />
            </form>
        </Box>
    );
}

关键说明 #

1. handleSubmit返回的函数会自动调用event.preventDefault()，阻止页面刷新，你只需要专注于处理表单数据即可。
2. 如果上述修改后仍有问题，可以尝试手动在表单的onSubmit事件中先阻止默认行为，再执行handleSubmit：

<form onSubmit={(e) => {
    e.preventDefault();
    handleSubmit(onSubmit)(e);
}}>

内容的提问来源于stack exchange，提问作者David Miloseski