使用react-hook-form验证Radio buttons时选中取值始终为"on"问题排查

问题根因 #

• 你没有为每个单选框显式设置value属性，浏览器默认会将未指定value的选中单选框值返回为"on"
• 你手动为单选框设置的name="radio"属于冗余配置，调用register("usCitizen")时react-hook-form会自动为同字段的单选框绑定统一的name属性，不需要额外手动指定。

修复方案 #

给每个单选框添加对应value属性即可，修复后代码如下：

<div className="">
  <label htmlFor="" className=" ">
    US Citizen?
  </label>
  <div className="">
    <div className="radio-container">
      <input type="radio" value="yes" {...register("usCitizen")} />
      <label>Yes</label>
    </div>

    <div className="radio-container">
      <input type="radio" value="no" {...register("usCitizen")} />
      <label>No</label>
    </div>
  </div>
</div>

如果你需要该字段返回布尔类型的值，直接将value替换为{true}和{false}即可，提交表单时就能拿到对应布尔类型的字段值。

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