React Hook Form中如何条件渲染默认值？

你提出的根据isLogin状态切换defaultValues的思路完全可行，结合React Hook Form的特性，这里给你整理两种优化方案，以及一些细节注意点：

方案一：初始化时动态绑定默认值 #

直接在useForm初始化阶段根据当前isLogin状态选择对应默认值，同时在切换表单时调用reset确保表单值同步更新：

import { useState } from "react";
import "./styles.css";
import { useForm, Controller } from "react-hook-form";

const signupDefaultValues = {
  name: "",
  email: "",
  password: "",
};

const loginDefaultValues = {
  email: "",
  password: "",
};

export default function App() {
  const [isLogin, setIsLogin] = useState(false);
  // 初始化时根据isLogin动态选择默认值
  const { handleSubmit, control, reset } = useForm({
    defaultValues: isLogin ? loginDefaultValues : signupDefaultValues
  });

  const onSubmit = (data) => {
    if (isLogin) {
      console.log("Login:", data.email, data.password);
    } else {
      console.log("Signup:", data.name, data.email, data.password);
    }
  };

  const toggleForm = () => {
    const newLoginState = !isLogin;
    setIsLogin(newLoginState);
    // 切换后重置表单到对应状态的默认值
    reset(newLoginState ? loginDefaultValues : signupDefaultValues);
  };

  return (
    <div className="modal">
      <div className="modal-content">
        <h2>{isLogin ? "Login" : "Signup"}</h2>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="form-group">
            <label>Email</label>
            <Controller
              name="email"
              control={control}
              render={({ field }) => <input {...field} type="email" />}
            />
          </div>
          <div className="form-group">
            <label>Password</label>
            <Controller
              name="password"
              control={control}
              render={({ field }) => <input {...field} type="password" />}
            />
          </div>
          {!isLogin && (
            <div className="form-group">
              <label>Name</label>
              <Controller
                name="name"
                control={control}
                render={({ field }) => <input {...field} type="text" />}
              />
            </div>
          )}
          <button type="submit">Submit</button>
        </form>
        <button onClick={toggleForm}>{isLogin ? "Signup" : "Login"}</button>
      </div>
    </div>
  );
}

方案二：用useEffect自动监听状态变化 #

如果不想在切换函数里手动调用reset，可以通过useEffect监听isLogin的变化，自动触发表单重置：

// 仅修改核心逻辑部分，其余代码同方案一
export default function App() {
  const [isLogin, setIsLogin] = useState(false);
  const { handleSubmit, control, reset } = useForm({
    defaultValues: loginDefaultValues // 初始默认设为登录态的值
  });

  // 监听isLogin变化，自动重置表单
  useEffect(() => {
    reset(isLogin ? loginDefaultValues : signupDefaultValues);
  }, [isLogin, reset]);

  const toggleForm = () => {
    setIsLogin(!isLogin);
  };

  // 其余代码不变...
}

关键注意点 #

• React Hook Form的defaultValues仅在初始化时生效一次，后续状态切换必须通过reset方法更新表单值，这也是你现有代码中已经在做的核心逻辑。
• 登录态下不需要name字段，React Hook Form会自动忽略未通过Controller注册的字段，不用担心多余字段影响提交数据。

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