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

对于普通的 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 选择器的工作,但不想更改很多已经编写的代码。


GCT1015
浏览 51回答 1
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>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript