为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

一只甜甜圈 2022-09-23 14:52:04

我有一个无线电组,其形式是使用 的钩子。请注意,窗体的模式设置为 而不是 。组中的两个无线电输入都需要两次单击才能选中,但是,只需单击一下即可正确设置其值。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)

}

我该怎么做才能一键检查无线电输入?任何帮助都非常感谢!


查看完整描述

1 回答

?
达令说

TA贡献1480条经验 获得超6个赞

在尝试了一堆可能的解决方案并在其他设备上进行了测试之后,问题似乎只是整个表单的 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


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信