React Hook Form输入框无法捕获输入值问题排查求助

• 检查register调用是否正确
  确保输入框正确绑定register返回的属性，必须通过展开运算符把register("searchValue")的属性传递给input标签，示例代码：

  <input 
    placeholder="Or search for a contact type by name..."
    {...register("searchValue")}
  />
  

  不要手动设置value或onChange属性，除非使用Controller组件，否则会覆盖React Hook Form的默认绑定逻辑，导致输入值无法被捕获。

• 确认useForm初始化无误
  检查是否正确解构register和watch，示例：

  const { register, watch } = useForm();
  

  如果设置了defaultValues，确保searchValue的初始值为合法的空值（比如空字符串），避免设为null或其他异常值导致输入异常：

  const { register, watch } = useForm({
    defaultValues: {
      searchValue: ""
    }
  });
  

• 排查组件渲染异常
  确保useForm在组件顶层调用，不要放在条件判断、循环或嵌套函数内部，否则会导致表单实例被重复初始化，无法持续捕获输入值。

• 检查外部干扰因素
  确认输入框未被设置readonly属性，也没有全局样式或第三方脚本修改输入框的输入行为；同时检查输入框的type属性是否为text或其他支持文本输入的类型，避免误设为hidden等类型。

• 修正watch的使用方式
  直接在组件顶层调用console.log(watch("searchValue"))可能无法实时看到值的变化，建议通过订阅方式监听：

  useEffect(() => {
    const subscription = watch((values) => {
      console.log(values.searchValue);
    });
    return () => subscription.unsubscribe();
  }, [watch]);
  

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