Next.js 13.4中React Hook Form的handleSubmit无法传入Server Action怎么办？

React Hook Form 的 handleSubmit 是用于处理前端表单提交逻辑的工具函数，不能直接赋值给原生表单的 action 属性（action 是原生HTML表单指定后端提交地址的属性，和前端验证逻辑无关）。要让验证功能正常工作，必须通过表单的 onSubmit 事件绑定 handleSubmit，以下是具体解决方法：

基础用法（前端处理提交逻辑） #

直接在表单元素上绑定 onSubmit 为 handleSubmit(你的提交函数)，React Hook Form会自动先执行表单验证，只有验证通过后才会调用你的提交函数。

示例代码：

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

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // 验证通过后执行的自定义提交逻辑
  const onSubmit = (formData) => {
    console.log("验证通过的表单数据：", formData);
    // 此处可添加发送API请求、状态更新等逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("email", { required: "邮箱不能为空", pattern: { value: /^\S+@\S+$/i, message: "请输入有效的邮箱格式" } })}
        type="email"
        placeholder="邮箱"
      />
      {errors.email && <p className="error">{errors.email.message}</p>}

      <input
        {...register("password", { required: "密码不能为空", minLength: { value: 6, message: "密码长度不能少于6位" } })}
        type="password"
        placeholder="密码"
      />
      {errors.password && <p className="error">{errors.password.message}</p>}

      <button type="submit">登录</button>
    </form>
  );
}

结合原生action提交到后端 #

如果需要保留原生表单的 action 属性（直接提交到后端接口），同时使用React Hook Form的前端验证，可以在验证通过后手动触发原生表单提交：

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

function SubmitToBackendForm() {
  const formRef = useRef(null);
  const { register, handleSubmit, formState: { errors } } = useForm();

  // 验证通过后触发原生表单提交
  const onValidateSuccess = () => {
    formRef.current.submit();
  };

  return (
    <form
      ref={formRef}
      action="/api/user/submit"
      method="POST"
      onSubmit={handleSubmit(onValidateSuccess)}
    >
      <input
        {...register("username", { required: "用户名不能为空" })}
        type="text"
        placeholder="用户名"
      />
      {errors.username && <p className="error">{errors.username.message}</p>}

      <button type="submit">提交</button>
    </form>
  );
}

关键说明 #

• handleSubmit 的作用是包裹你的提交函数，先执行React Hook Form的验证规则，验证通过才会执行内部的提交逻辑。
• 原生表单的 action 和 onSubmit 可以共存，但需要通过手动触发的方式衔接，避免直接跳过验证逻辑。

内容的提问来源于stack exchange，提问作者Merul Panwala