有没有办法为语义 UI React Dropdown 提供 html“名称”属性

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&nbsp; &nbsp; trigger={<Button onClick={() => setOpen(true)}>Open</Button>}&nbsp; &nbsp; onClose={() => setOpen(false)}&nbsp; &nbsp; icon={null}&nbsp; &nbsp; open={open}&nbsp; &nbsp; simple&nbsp; >&nbsp; &nbsp; <Dropdown.Menu>&nbsp; &nbsp; &nbsp; ... add the options with the "name" tag ...&nbsp; &nbsp; </Dropdown.Menu>&nbsp; </Dropdown>