如何在React Hook Form中将单选框输入值转换为布尔类型？

问题复现 #

在React Hook Form（以下简称RHF）中使用单选输入框时，需要获取原生布尔类型的字段值，而非输入框默认返回的字符串类型。已知RHF提供valueAsNumber方法可将输入值转换为数字类型，尝试使用通用类型转换方法setValueAs实现布尔转换时未生效，复现代码如下：

const schema = z.object({
  name: z.string().min(4, { message: "名称最少需要4个字符" }),
  developer: z.boolean() // 期望此处得到真正的布尔值
});

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      name: "John",
      developer: false // 默认值设为布尔类型
    }
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <input type="text" placeholder="Name" {...register("name")} />

      <p>
        是否为开发者？&nbsp;
        <label>
          是
          <input
            {...register("developer", {
              setValueAs: (val) => true // 尝试直接返回布尔值true，未生效
            })}
            type="radio"
            value={true}
          />
        </label>
        <label>
          否
          <input
            {...register("developer", {
              setValueAs: (val) => false
            })}
            type="radio"
            value={false}
          />
        </label>
      </p>

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

失效原因 #

• 原生radio输入的value属性最终会被DOM序列化为字符串，即使JSX中传入value={true}，DOM实际存储的值为字符串"true"
• 对同名字段多次调用register时，后续传入的配置会覆盖之前的配置，两个单选框分别写不同的setValueAs逻辑，最终只会保留最后一次注册的转换规则，无法根据选中项返回对应布尔值
• setValueAs的入参始终是DOM节点上存储的字符串值，不会读取JSX中传入的非字符串类型value属性

可行解决方案 #

方案1：在Zod校验层做值转换（最推荐） #

该方案将值转换逻辑收敛到数据校验层，和UI层逻辑解耦，不需要修改表单绑定逻辑：

const schema = z.object({
  name: z.string().min(4, { message: "名称最少需要4个字符" }),
  // 先接收radio返回的字符串值，再转换为布尔值
  developer: z.enum(["true", "false"])
    .transform((val) => val === "true")
});

表单内的单选框去掉自定义setValueAs配置，将value属性改为字符串值即可：

<label>
  是
  <input {...register("developer")} type="radio" value="true" />
</label>
<label>
  否
  <input {...register("developer")} type="radio" value="false" />
</label>

方案2：使用Controller组件手动控制值 #

通过RHF内置的Controller组件绕开原生输入框的值序列化逻辑，直接在选中事件中传入布尔值：

import { useForm, Controller } from 'react-hook-form';

// 先从useForm返回值中解构control
const { control, /* 其他返回值 */ } = useForm({ /* 配置 */ })

// 表单内单选框部分替换为以下代码
<Controller
  name="developer"
  control={control}
  render={({ field }) => (
    <>
      <label>
        是
        <input
          type="radio"
          checked={field.value === true}
          onChange={() => field.onChange(true)}
        />
      </label>
      <label>
        否
        <input
          type="radio"
          checked={field.value === false}
          onChange={() => field.onChange(false)}
        />
      </label>
    </>
  )}
/>

方案3：修正setValueAs的写法 #

同名字段只需要在第一次注册时写一次setValueAs逻辑，统一处理字符串到布尔值的转换即可，注意单选框的value属性需要设为字符串类型：

<label>
  是
  <input
    {...register("developer", {
      setValueAs: (val) => val === "true"
    })}
    type="radio"
    value="true"
  />
</label>
<label>
  否
  <input
    {...register("developer")}
    type="radio"
    value="false"
  />
</label>

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