有没有办法为语义 UI React Dropdown 提供 html "name" 属性，使其表现得像表单提交上的普通输入元素？

Question

对于普通 html 元素，您可以通过表单获取该元素的值。

 function handleSubmit(event) {
    event.preventDefault()
    const formData = new FormData(e.target)
    console.log(formData.get("test"))
    // logs the value of the html element with the name "test"
  }

<form onSubmit={handleSubmit}>
    <input name="test" />
    <button type="submit">Submit</button>
</form>

表单将分配一个键“测试”表单提交时输入中的任何内容的值。

我的问题：有没有办法让这个功能与语义 UI 下拉列表一起使用？

下面是我认为可行的理想情况，但我知道行不通，因为该组件是其他元素的包装器。

 function handleSubmit(event) {
    event.preventDefault()
    const formData = new FormData(e.target)
    console.log(formData.get("test"))
    // logs the value of the html element with the name "test"
  }

<form onSubmit={handleSubmit}>
    <Dropdown name="test" selection options={
        [{key: '1', text: 'text', value: '1'}]
      }/>
    <button type="submit">Submit</button>
</form>

在提交表单时，无论在该下拉列表中选择什么值，都会将其放入 formData 中名为“test”的键中。如果未选择任何值，则会为键“test.”赋予未定义的值。

这可能吗？我有另一个使用基本 html 选择器的工作，但不想更改很多已经编写的代码。

Answer 1

可以，但是您需要解构下拉组件。

const [open, setOpen] = useState(false)

<Dropdown
    trigger={<Button onClick={() => setOpen(true)}>Open</Button>}
    onClose={() => setOpen(false)}
    icon={null}
    open={open}
    simple
  >
    <Dropdown.Menu>
      ... add the options with the "name" tag ...
    </Dropdown.Menu>
  </Dropdown>

有没有办法为语义 UI React Dropdown 提供 html "name" 属性，使其表现得像表单提交上的普通输入元素？

Is there a way to give a Semantic UI React Dropdown the html "name" attribute so it will behave like a normal input element on a form submit?

html

javascript

forms

reactjs

semantic-ui-react