语义反应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);
    }
  };