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

Question

我有一个无线电组，其形式使用 react-hook-form 的 useForm 挂钩。请注意，表单的模式设置为 onChange 而不是 onSubmit。该组中的两个无线电输入都需要单击两次才能被选中，但是，它们的值只需单击一下即可正确设置。

这个简短的 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中的console.logs来自这里）：

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>

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

现在，我使用 react-hook-form 的 watch() 方法通过以下 useEffect 挂钩从表单输入中收集所有值：

let data = watch()

useEffect(() => {
  console.log(data)
}, [data])

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

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

Why do these uncontrolled radio inputs require two clicks to be selected?

javascript

input

radio-group

reactjs

react-hooks