react-hook-form中radio单选输入如何正确将选中值同步为state

你遇到的state始终为false的问题，本质是自定义事件和react-hook-form的内置托管逻辑冲突：

• react-hook-form的register方法会自动给表单元素绑定onChange事件接管值更新，你手动给radio绑定的自定义onChange要么被覆盖，要么触发顺序不对，没法正确更新你自己声明的state
• 同组radio没有按react-hook-form的规范配置统一name和对应value，框架默认采集的是字符串格式的值，和你需要的布尔类型不匹配，进一步导致值更新异常

不需要额外维护独立的useState存储单选值，react-hook-form本身可以全量托管表单值，提交时直接拿到符合要求的布尔值传POST请求即可，减少冗余的状态同步逻辑。

基础实现代码 #

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

export default function App() {
  const { register, handleSubmit, watch } = useForm({
    // 可设置默认值，默认选中「否」就配置为false
    defaultValues: {
      isConfirm: false
    }
  });

  const submitForm = (formData) => {
    // 此处formData.isConfirm直接是布尔类型，可直接作为POST参数提交
    console.log("提交数据：", formData);
  };

  // 需要实时获取当前选中值，调用watch方法即可，无需自行同步state
  const currentValue = watch("isConfirm");

  return (
    <form onSubmit={handleSubmit(submitForm)}>
      <div>
        <label style={{ marginRight: 16 }}>
          <input
            type="radio"
            // 同组单选项必须使用相同的name字段
            {...register("isConfirm", {
              // 把原生控件返回的字符串值转为布尔值
              setValueAs: (val) => val === "true"
            })}
            value="true"
          />
          是
        </label>
        <label>
          <input
            type="radio"
            {...register("isConfirm", {
              setValueAs: (val) => val === "true"
            })}
            value="false"
          />
          否
        </label>
      </div>
      <p>当前选中状态：{String(currentValue)}</p>
      <button type="submit" style={{ marginTop: 16 }}>提交</button>
    </form>
  );
}

特殊场景适配 #

如果你有业务场景必须把单选值同步到独立的组件state中，不要直接给input元素覆盖onChange事件，用watch监听字段变化后同步即可，避免和react-hook-form的内置事件冲突：

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

export default function App() {
  const [confirmState, setConfirmState] = useState(false);
  const { register, handleSubmit, watch } = useForm();
  const confirmValue = watch("isConfirm");

  // 监听表单值变化同步到独立state
  useEffect(() => {
    setConfirmState(confirmValue);
  }, [confirmValue]);

  const submitForm = (formData) => {
    console.log("提交数据", formData, "独立state值", confirmState);
  };

  return (
    // 表单结构和上面基础实现一致
    <form onSubmit={handleSubmit(submitForm)}>
      {/* 单选组件配置同上 */}
    </form>
  )
}

注意：原生radio input的value属性默认只支持字符串类型，必须通过setValueAs配置做类型转换，才能拿到标准的布尔true/false值，避免提交参数类型不符合接口要求。

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