Question

我创建了一个自定义钩子，以与使用语义UI反应构建的表单一起使用。挂钩的代码如下（取自here）

import React, { useState } from 'react'

const useForm = callback => {
  const [inputs, setInputs] = useState({})
  const handleSubmit = event => {
    if (event) {
      event.preventDefault()
    }
  }
  const handleInputChange = event => {
    event.persist()
    setInputs(inputs => ({
      ...inputs,
      [event.target.name]: event.target.value,
    }))
  }
  return {
    handleSubmit,
    handleInputChange,
    inputs,
  }
}

export default useForm

此刻，我的所有基于文本的输入都可以很好地工作，但是我添加了一些单选按钮，如下所示：

<Form.Group inline>
  <label>Number of Hours</label>
  <Form.Radio
    label="<3 Hours"
    name="hours"
    onChange={handleInputChange}
    value="1"
    checked={inputs.hours === 1}
  />
  <Form.Radio
    label="3+ Hours"
    name="hours"
    onChange={handleInputChange}
    value="2"
    checked={inputs.hours === 2}
  />
</Form.Group>

但是挂钩无法正常工作。我已经进行了一些挖掘，这似乎是因为onChange（我也尝试过onClick）似乎会在语义UI反应中触发标签，因此该事件未包含正确的目标名称或值。我能想到的唯一解决方法是编写一些自定义处理程序，该处理程序创建一个伪事件，在标签之前查找隐藏的无线电输入，但似乎应该有一种更简洁的方法。

更新的解决方法 我为无线电创建了一个自定义处理程序，以作为临时解决方法，并且还调整了checked部分以将引号引起来。可以，但是如果有人知道更好的方法，请分享。

这是自定义处理程序。

  const radioHandleInputChange = e => {
    let { value, name } = e.target.previousSibling
    e.target.name = name
    e.target.value = value
    handleInputChange(e)
  }

具有语义UI反应的自定义钩子单选按钮

0 个答案: