语义反应 ui 下拉多项选择：Select 全部的选项

Question

我正在开发一个基于钩子的 React 应用程序，对于多 select 下拉菜单，我正在使用 React 语义 ui 下拉菜单。但是没有Select所有项目的选项。如何实现这一点？单击 Select 所有项目都应 selected 而不是显示在下拉列表中：-

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;

Answer 1

您需要使用 event.target.textContent 检查最后选择的项目，如果选择了则添加所有选项。

const onChange = (event, data) => {
    if(event.target.textContent === 'Select All') {
      setSelectedItems(data.options.map(d => d.value))
    } else {
      setSelectedItems(data.value);
    }
  };

语义反应 ui 下拉多项选择：Select 全部的选项

Semantic react ui dropdown multiple selection: option to Select All

multipleselection

reactjs

dropdown

react-hooks