React Hook Form：实现按值条件注册输入框的教程

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

export default function App() {
  const { register, handleSubmit, watch, formState: { errors }, setValue } = useForm();
  // ... 其他代码
}

  const handleInputChange = (e) => {
    const { name, value } = e.target; // 获取输入框的name和当前值

    // 检查输入值是否非空且不全是空白字符
    if (value.trim() !== "") {
      // 如果值有效，则使用setValue注册并设置该字段的值
      setValue(name, value);
    } else {
      // 如果值为空或全是空白字符，可以根据需求选择是否取消注册或清空值
      // 例如，如果希望完全不注册，可以不调用setValue
      // 或者，如果希望清空但仍保留注册，可以调用setValue(name, '')
      // 在本教程场景下，我们主要关注有值才注册，所以此处不调用setValue即可
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 这是一个普通注册的输入框，始终注册 */}
      <input defaultValue="test" {...register("example")} />

      {/* 这是一个需要按值条件注册的输入框 */}
      <input
        {...register("exampleRequired", { required: true })} // 依然使用register关联字段名和验证规则
        onChange={handleInputChange} // 绑定我们的自定义onChange处理器
      />
      {errors.exampleRequired && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );

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

export default function App() {
  // 从useForm中解构出register, handleSubmit, watch, formState:{ errors } 和 setValue
  const { register, handleSubmit, watch, formState: { errors }, setValue } = useForm();

  // 提交表单时的处理函数
  const onSubmit = data => console.log(data);

  // 自定义输入框的onChange事件处理器
  const handleInputChange = (e) => {
    const { name, value } = e.target; // 获取当前输入框的name和值

    // 检查输入值是否非空且不全是空白字符
    if (value.trim() !== "") {
      // 如果值有效，则使用setValue注册该字段并设置其值
      setValue(name, value);
    }
    // 如果值为空或全是空白字符，则不调用setValue，从而避免注册空值
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 示例：一个默认注册的输入框 */}
      <label>
        默认注册字段 (始终注册):
        <input defaultValue="test" {...register("example")} />
      </label>
      <br />

      {/* 示例：一个按值条件注册的必填输入框 */}
      <label>
        条件注册字段 (有值才注册):
        <input
          {...register("exampleRequired", { required: true })} // 仍然使用register关联字段名和验证规则
          onChange={handleInputChange} // 绑定自定义的onChange处理器
        />
      </label>
      {/* 当该字段被注册且为空时，显示必填错误信息 */}
      {errors.exampleRequired && <span>This field is required</span>}
      <br />

      <input type="submit" />
    </form>
  );
}