如何在react-hook-form中条件性设置默认值

问题分析 #

使用react-hook-form（rhf）构建复杂嵌套表单时，通过复选框切换默认值：勾选时用reset填充预设值，但取消勾选时调用reset({}, { keepValues: false, keepDefaultValues: false })无法清空表单。这是因为初始化useForm时未明确设置基准默认值，rhf会将首次渲染的字段状态作为隐性默认值，导致后续reset空对象无法覆盖已设置的值。

解决方案 #

核心是在初始化useForm时，明确传入代表“清空状态”的defaultValues，之后通过reset切换到预设值或初始空值即可，无需递归处理嵌套字段。

修改后的示例代码 #

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

// 预设的默认值
const presetDefaultValues = { name: `John Doe` };

const Form = () => {
  const [useDefaultValues, setUseDefaultValues] = useState(false);
  // 初始化时设置基准默认值为空对象
  const { register, handleSubmit, reset } = useForm({ defaultValues: {} });

  useEffect(() => {
    if (useDefaultValues) {
      // 切换为预设默认值
      reset(presetDefaultValues);
    } else {
      // 重置回初始化时的空默认值（直接调用reset不传参数即可）
      reset();
    }
  }, [useDefaultValues, reset]);

  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={useDefaultValues}
          onChange={() => setUseDefaultValues((prev) => !prev)}
        />
        使用默认值
      </label>
      <form onSubmit={handleSubmit((data) => console.log(data))}>
        <div>
          <label>姓名</label>
          <input type="text" name="name" {...register("name")} />
        </div>
        <input type="submit" value="提交" />
      </form>
    </>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Form />, rootElement);

关键说明 #

1. 初始化基准默认值：useForm({ defaultValues: {} })明确告诉rhf，表单的初始清空状态是空对象，这是reset的基准线。
2. 简化reset调用：取消勾选时直接调用reset()即可，rhf会自动将表单恢复到初始化时的defaultValues（即空对象），无需额外配置参数。
3. 适配嵌套对象：这种方式同样适用于深层嵌套的复杂表单，无需递归处理每个字段，rhf会自动根据初始化的默认值结构完成重置。

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