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

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)}>&nbsp; {...}&nbsp; // radio buttons were here</form>处理程序工作正常，但无意中导致无线电单击问题。删除 后，此问题已得到解决。onChangeonChange现在，我使用 's watch（） 方法使用以下钩子从表单输入中收集所有值：react-hook-formuseEffectlet data = watch()useEffect(() => {&nbsp; console.log(data)}, [data])这基本上提供了与处理程序相同的结果，而没有单选按钮双击问题！onChange