如果这是一个愚蠢的问题我很抱歉,但我无法弄清楚如何使用semantic-ui-React组件从多个搜索选择下拉框中获取值。我已经让它在其中呈现正确的项目并且选择和搜索工作正常,但我似乎无法弄清楚如何从用户选择的内容中获取值。
https://react.semantic-ui.com/modules/dropdown/#types-multiple-selection
谢谢
编辑:
码:
import React from 'react'
import { Dropdown } from 'semantic-ui-react'
const wbcOptions = [
{
key:1,
text: 'Normal',
value: 'Normal'
},
{
key:2,
text: 'PLT Clumping',
value: 'PLT Clumping
},
{
key:3,
text: 'Reactive Lymphocytes',
value: 'Reactive Lymphocytes'
},
{
key:4,
text: 'Hypersegmented Neutrophils',
value: 'Hypersegmented Neutrophils'
}
]
const DropdownWBC = (props) => (
<Dropdown
placeholder='WBC Abnormalities'
fluid
multiple
search
selection
options={wbcOptions}
onChange={props.handleSelectChange} //Is this where I would pass onChange method??
/>
)
export default DropdownWBC
所以我在我的App.js文件中创建了一个名为'handleSelectChange'的函数,并将其作为道具传递给此(DropdownWBC)组件。我如何从多个选择dropbox sementic-react组件中获取值并将其传递给我的App.js组件,以便我可以使用其值设置state?
我想这就是你想要做的。请检查以下代码。
// By using this "onchange" handler you can access the values selected by the user.
const handleChange = (e, {value}) => {
console.log(value)
}
const DropdownExampleMultipleSelection = () => (
<Dropdown placeholder='Skills' onChange={handleChange.bind(this)} fluid multiple
selection options={options} />
)