React Hook Form提交成功后如何重置表单并隐藏联动显示的字段

问题原因 #

你当前用独立的useState变量showYes控制隐藏字段的显示逻辑，而react-hook-form提供的reset()方法只会重置它自身管理的表单字段值，不会主动更新这个局部state，所以提交后就算表单值回到默认状态，showYes还是会保持之前的true状态，导致隐藏字段不会自动消失。

另外你代码里还有两处逻辑疏漏：

• Yes单选框的onClick直接绑定了setShowYes，点击时会把事件对象作为参数传入，showYes实际会被赋值为事件对象而非布尔值，属于隐性逻辑错误
• useForm的默认值配置里yes_no设为false，但两个单选框的value是字符串Yes/No，两者类型不匹配

最小改动解决方案 #

只需要修改3处代码即可实现需求：

1. 修正useForm默认值配置，和单选框value类型匹配

const {
  register,
  handleSubmit,
  reset,
  formState: { errors }
} = useForm({
  defaultValues: { yes_no: "No", yes_i_understand: false } // 把false改为"No"
});

2. 修正Yes单选框的点击事件逻辑

<input
  className="form-check-input"
  type="radio"
  value="Yes"
  id="yes"
  name="yes_no"
  onClick={() => setShowYes(true)} // 改为箭头函数显式传入true
/>

3. 调用reset()时同步重置showYes状态

const sendEmail = formData => {
  emailjs
    .send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", formData, "YOUR_USER_ID")
    .then(
      result => {
        console.log(result.text);
      },
      error => {
        console.log(error.text);
      }
    );
  reset();
  setShowYes(false); // 新增这行同步重置显示状态
};

更优雅的优化方案 #

如果不想单独维护showYes的state，可以用react-hook-form提供的watch方法监听yes_no字段的变化，自动控制显示逻辑，后续不需要手动维护状态同步：

// 解构时新增watch方法
const {
  register,
  handleSubmit,
  reset,
  watch, // 新增
  formState: { errors }
} = useForm({
  defaultValues: { yes_no: "No", yes_i_understand: false }
});
// 监听yes_no字段值，自动计算是否显示隐藏字段
const showYes = watch("yes_no") === "Yes";
// 可以删除原来的const [showYes, setShowYes] = useState(false)代码
// 同时删除两个单选框的onClick绑定即可

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