React Hook Form useForm：按回车键提交表单无法获取最新输入值的解决方法

这个问题我之前也碰到过，核心原因是你手动维护的输入状态和React Hook Form（RHF）的内部状态不同步，再加上onChange的写法还踩了个小坑。咱们一步步拆解解决：

先看你代码里的两个关键问题 #

1. onChange的参数错误：你写的(text)=> setSearchinput(text)里，text其实是浏览器的输入事件对象，不是输入框的实际值——这意味着你存在searchinput里的根本不是用户输入的内容，本身就逻辑错误。
2. 重复维护状态导致不同步：RHF的register方法已经帮你自动管理表单字段的状态了，手动额外维护searchinput完全没必要，反而会造成RHF内部状态和你的自定义状态更新时机不一致，回车键提交时就会出现旧值提交的问题。

解决方案1：移除自定义状态，直接用RHF的表单数据 #

这是最简洁的做法，完全依赖RHF的状态管理，不管点击按钮还是按回车键，都能拿到最新的输入值：

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

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

  // 提交时直接从RHF返回的data参数里拿最新值
  const onValid = (data) => {
    console.log("提交的搜索名：", data.searchname);
    // 这里写你的实际提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onValid)}>
      <input
        {...register("searchname", { required: "이름을 적어주세요." })}
        type="text"
        placeholder="이름을 검색해주세요."
        className="focus:outline-none focus:border-[#FF2D78] border-2 w-56 border-gray-500 rounded-md py-1 text-center"
      />
      {/* 可选：显示必填项错误提示 */}
      {errors.searchname && <p className="text-red-500 mt-1">{errors.searchname.message}</p>}
      <button className="bg-gray-300 rounded-md py-1 px-3 ml-2">검색</button>
    </form>
  );
}

解决方案2：需要实时获取输入值？用RHF的watch方法 #

如果你的场景需要实时监听输入（比如边输入边做即时搜索），不要自己写onChange，用RHF提供的watch方法即可，它会自动订阅字段变化，返回最新值：

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

function SearchForm() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  // 实时监听searchname字段的最新值
  const currentSearchName = watch("searchname");

  // 用useEffect做实时操作（比如即时搜索）
  useEffect(() => {
    if (currentSearchName) {
      console.log("实时输入值：", currentSearchName);
      // 这里写你的即时搜索逻辑
    }
  }, [currentSearchName]);

  const onValid = (data) => {
    console.log("提交的搜索名：", data.searchname);
    // 提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onValid)}>
      <input
        {...register("searchname", { required: "이름을 적어주세요." })}
        type="text"
        placeholder="이름을 검색해주세요."
        className="focus:outline-none focus:border-[#FF2D78] border-2 w-56 border-gray-500 rounded-md py-1 text-center"
      />
      {errors.searchname && <p className="text-red-500 mt-1">{errors.searchname.message}</p>}
      <button className="bg-gray-300 rounded-md py-1 px-3 ml-2">검색</button>
    </form>
  );
}

为什么回车键提交会失效？ #

当你按回车键提交时，RHF会立即读取它内部维护的字段状态；但你手动维护的searchinput状态更新时机和RHF内部状态不同步，甚至你存的还是事件对象，自然会出现提交旧值或无效值的问题。移除自定义状态后，完全依赖RHF的内部状态，就能保证两种提交方式都拿到最新值。

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