如何使用React Hook Form仅注册含有值的输入框？

要实现只在输入框有值时才注册字段，你可以利用React Hook Form提供的unregister方法，结合监听输入值变化来动态控制字段的注册状态。

方案一：通过useEffect监听输入值 #

这种方式会自动监听输入框的实时值变化，实时处理字段的注册/取消注册：

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

export default function App() {
  const { register, handleSubmit, watch, unregister, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  
  // 监听两个输入框的实时值
  const exampleVal = watch("example");
  const requiredVal = watch("exampleRequired");

  // 控制example字段的注册状态
  useEffect(() => {
    if (!exampleVal) {
      unregister("example");
    } else {
      register("example");
    }
  }, [exampleVal, register, unregister]);

  // 控制必填字段exampleRequired的注册状态
  useEffect(() => {
    if (!requiredVal) {
      unregister("exampleRequired");
    } else {
      register("exampleRequired", { required: true });
    }
  }, [requiredVal, register, unregister]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" {...register("example")} />
      
      <input {...register("exampleRequired", { required: true })} />
      {errors.exampleRequired && <span>此字段为必填项</span>}
      
      <input type="submit" />
    </form>
  );
}

方案二：在输入框onChange事件中手动处理 #

这种方式更直接，在输入框值变化时手动触发注册/取消注册逻辑：

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

export default function App() {
  const { register, handleSubmit, unregister, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  // 通用处理函数：根据值是否为空决定注册或取消注册字段
  const toggleRegister = (fieldName, value) => {
    if (!value.trim()) {
      unregister(fieldName);
    } else {
      register(fieldName);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input 
        defaultValue="test" 
        {...register("example")} 
        onChange={(e) => toggleRegister("example", e.target.value)}
      />
      
      <input 
        {...register("exampleRequired", { required: true })} 
        onChange={(e) => toggleRegister("exampleRequired", e.target.value)}
      />
      {errors.exampleRequired && <span>此字段为必填项</span>}
      
      <input type="submit" />
    </form>
  );
}

注意事项 #

• 对于必填字段，上述方案中如果输入框为空会取消注册，此时React Hook Form的内置必填校验不会触发。如果需要同时保留必填校验和“仅注册有值字段”的逻辑，可以在提交时手动校验空值，或者调整逻辑为：必填字段始终注册，但提交时过滤掉空值。
• unregister方法会将字段从表单的errors和values对象中完全移除，确保最终提交的数据里只包含有值的字段。

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