如何解决语义反应ui下拉菜单多选:“全选”选项
我正在开发基于钩子的react应用程序,对于多选择下拉菜单,我使用react语义ui Dropdown。但是没有选择“全部选择”的选项。如何做到这一点?单击“全选”时,应选择所有项目,而不显示在下拉列表中:-
import React,{ useState } from "react";
import { Dropdown } from "semantic-ui-react";
const options = [
{ key: "select all",text: "Select All",value: "Select All" },{ key: "angular",text: "Angular",value: "angular" },{ key: "css",text: "CSS",value: "css" },{ key: "design",text: "Graphic Design",value: "design" },{ key: "ember",text: "Ember",value: "ember" },{ key: "html",text: "HTML",value: "html" },{ key: "ia",text: "Information Architecture",value: "ia" },{ key: "ux",text: "User Experience",value: "ux" }
];
const DropdownExampleMultipleSelection = () => {
const [selectedItems,setSelectedItems] = useState([]);
const onChange = (event,data) => {
setSelectedItems(data.value);
if (data.value == "Select All") {
console.log(data);
console.log(event.target);
}
};
return (
<Dropdown
placeholder="Skills"
clearable
fluid
multiple
selection
options={options}
onChange={onChange}
value={selectedItems}
label="Skills"
/>
);
};
export default DropdownExampleMultipleSelection;
解决方法
您需要检查带有event.target.textContent的最后选择的项目,并选择所有选项(如果已选择)。
const onChange = (event,data) => {
if(event.target.textContent === 'Select All') {
setSelectedItems(data.options.map(d => d.value))
} else {
setSelectedItems(data.value);
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。