为什么这些不受控制的无线电输入需要两次点击才能选择？

Question

我有一个无线电组，其形式是使用 的钩子。请注意，窗体的模式设置为 而不是 。组中的两个无线电输入都需要两次单击才能选中，但是，只需单击一下即可正确设置其值。react-hook-formuseFormonChangeonSubmit这个简短的GIF将更好地解释我的问题：https://imgur.com/a/Pdivd3p单选按钮组：<div>  <label>Radio group label...</label>  <div>    <div>      <label>        <span>Yes</span>          <input            name="radioName"            type="radio"            value={true}            ref={register}          />      </label>    </div>    <div>      <label>        <span>No</span>          <input            name="radioName"            type="radio"            value={false}            ref={register}          />      </label>    </div>  </div></div>这是整个表单的 onChange 方法（GIF 中的控制台日志来自此处）：const handleFormChange = data => {    console.log(data.radioName)}我该怎么做才能一键检查无线电输入？任何帮助都非常感谢！

Answer 1

在尝试了一堆可能的解决方案并在其他设备上进行了测试之后，问题似乎只是整个表单的 onChange 处理程序。表单代码如下所示：

// handleSubmit is provided by react-hook-form

// handleFormChange prints the value of each form input

<form onChange={handleSubmit(handleFormChange)}>

  {...}

  // radio buttons were here

</form>

处理程序工作正常，但无意中导致无线电单击问题。删除 后，此问题已得到解决。onChangeonChange

现在，我使用 's watch（） 方法使用以下钩子从表单输入中收集所有值：react-hook-formuseEffect

let data = watch()

useEffect(() => {

  console.log(data)

}, [data])

这基本上提供了与处理程序相同的结果，而没有单选按钮双击问题！onChange