如何在 React Hook 表单中将输入单选的值转换为布尔值？

Question

我在 React Hook Form 中输入了 radio，我尝试将其用作真正的布尔值，而不是字符串。

\n

我知道 RHF 必须valueAsNumber将其转换为数字。我认为这setValueAs是允许任何转换的通用方法，但我无法使其工作。

\n

代码沙盒

\n

\nconst schema = z.object({\n  name: z.string().min(4, { message: "4 caract\xc3\xa8res minimum pour le name" }),\n  developer: z.boolean() // A real boolean is expected here\n});\n\nexport default function App() {\n  const {\n    register,\n    handleSubmit,\n    watch,\n    formState: { errors }\n  } = useForm({\n    resolver: zodResolver(schema),\n    defaultValues: {\n      name: "John",\n      developer: false // default as boolean\n    }\n  });\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)} noValidate>\n      <input type="text" placeholder="Name" {...register("name")} />\n\n      <p>\n        Is developer ?&nbsp;\n        <label>\n          Oui\n          <input\n            {...register("developer", {\n              setValueAs: (val) => true // Try to make it as a real boolean but doesn\'t work\n            })}\n            type="radio"\n            value={true}\n          />\n        </label>\n        <label>\n          Non\n          <input\n            {...register("developer", {\n              setValueAs: (val) => false\n            })}\n            type="radio"\n            value={false}\n          />\n        </label>\n      </p>\n\n      <input type="submit" />\n\n    </form>\n  );\n}\n\n

\n

任何想法？

\n

Answer 1

我了解了如何从 RHF 中的无线电输入获取布尔值。

正如我之前尝试过的那样，setValueAs 的解决方案仅适用于文本输入（如 type="text" 或 type="number"）。对于单选按钮，即使值为字符串，也不起作用。

所以可以通过使用Controller组件来解决。

代码沙箱

function MyBooleanInput({ control, name }) {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, onBlur, value, ref } }) => (
        <>
          <label>
            Oui
            <input
              type="radio"
              onBlur={onBlur} // notify when input is touched
              onChange={() => onChange(true)} // send value to hook form
              checked={value === true}
              inputRef={ref}
            />
          </label>
          <label>
            Non
            <input
              type="radio"
              onBlur={onBlur} // notify when input is touched
              onChange={() => onChange(false)} // send value to hook form
              checked={value === false}
              inputRef={ref}
            />
          </label>
        </>
      )}
    />
  );
}

这样，值就是真正的布尔值，并且 zod 不会抛出错误。