如何清除语义UI中的多重选择下拉列表？
如何清除语义UI中的多重选择下拉列表？
提问于 2020-12-15 16:02:15
我有一个Semantic下拉列表，它位于中，并希望在菜单中有按钮(仍然需要对它们进行居中.)
如何使用“清除”按钮清除选定的值？我可以使用'x‘图标清除选择，但这是内置在组件中的。
<Dropdown
search
multiple
selection
clearable
closeOnSelectionChange={false}
options={filterInitialSuggestions()}
className='selectDropdown'
header={dropdownButtons()}
/>
const dropdownButtons = () => {
return (
<div>
<Button positive size='mini'>
Save
</Button>
<Button grey size='mini' onClick={() => console.log('I want to reset the multi select dropdown')}>
Clear
</Button>
<Divider />
</div>
);
};回答 3
Stack Overflow用户
回答已采纳
发布于 2021-01-07 13:51:35
“保存”和“清除”按钮反应useState()。在Reactjs中，您不需要使用DOM查询选择器。
https://codesandbox.io/s/white-leftpad-q6re3?file=/src/Fun.jsx
Stack Overflow用户
发布于 2021-01-06 20:42:09
import React, { Component } from 'react';
import { Dropdown } from 'semantic-ui-react';
const options = [
{ key: 1, text: 'Choice 1', value: 1 },
{ key: 2, text: 'Choice 2', value: 2 },
{ key: 3, text: 'Choice 3', value: 3 },
{ key: 4, text: 'Choice 4', value: 4 },
{ key: 5, text: 'Choice 5', value: 5 },
{ key: 6, text: 'Choice 6', value: 6 },
]
class Example extends Component {
state = {
dropval: []
}
onDropChange = (e, { value }) => {
this.setState(
(prevState) => { return { ...prevState, dropval: value } },
// () => console.log(this.state)
)
}
render() {
return (
<div>
<Dropdown
search
multiple
selection
clearable
closeOnSelectionChange={false}
options={options}
className='selectDropdown'
onChange={this.onDropChange}
value={this.state.dropval}
style={{ width: 300 }}
/>
</div>
);
}
}
export default Example;Stack Overflow用户
发布于 2021-01-07 10:17:30
我想出了解决这个问题的办法。我不确定这是否是最好的方法，但它似乎很有效。
const dropdownButtons = () => {
return (
<>
<div className='dropdown-saveButton'>
<Button
positive
size='mini'
onClick={() => {
saveValues();
}}
>
Save
</Button>
<Button size='mini' onClick={clearDropdown}>
Clear
</Button>
</div>
<Divider inverted />
</>
);
};
const clearDropdown = e => {
var element = dropdownRef.current.querySelector('[aria-selected="true"]');
if (element) {
dropdownRef.current.querySelector('.clear')?.click();
}
};
<Dropdown
multiple
selection
fluid
clearable
header={dropdownButtons} />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65309428
复制相关文章
相似问题
腾讯云开发者
