Reactjs 语义反应ui下拉列表多选:选择全部的选项

Reactjs 语义反应ui下拉列表多选:选择全部的选项,reactjs,react-hooks,dropdown,multipleselection,Reactjs,React Hooks,Dropdown,Multipleselection,我正在开发一个基于hook的react应用程序,对于multi-select下拉菜单,我使用react语义ui下拉菜单。但没有选择所有项目的选项。如何做到这一点?单击Select(选择)时,应选择所有项目,且不显示在下拉列表中:- import React, { useState } from "react"; import { Dropdown } from "semantic-ui-react"; const options = [ { key:

我正在开发一个基于hook的react应用程序,对于multi-select下拉菜单,我使用react语义ui下拉菜单。但没有选择所有项目的选项。如何做到这一点?单击Select(选择)时,应选择所有项目,且不显示在下拉列表中:-

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;
import React,{useState}来自“React”;
从“语义ui反应”导入{Dropdown};
常量选项=[
{键:“全选”,文本:“全选”,值:“全选”},
{键:“角度”,文本:“角度”,值:“角度”},
{键:“css”,文本:“css”,值:“css”},
{键:“设计”,文本:“平面设计”,值:“设计”},
{键:“余烬”,文本:“余烬”,值:“余烬”},
{键:“html”,文本:“html”,值:“html”},
{键:“ia”,文本:“信息架构”,值:“ia”},
{键:“ux”,文本:“用户体验”,值:“ux”}
];
常量下拉示例多重选择=()=>{
const[selectedItems,setSelectedItems]=useState([]);
const onChange=(事件、数据)=>{
setSelectedItems(数据值);
如果(data.value==“全选”){
控制台日志(数据);
console.log(event.target);
}
};
返回(
);
};
导出默认下拉列表示例多重选择;

您需要使用event.target.textContent检查最近选择的项目,如果选中,则添加所有选项

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

请包括您已有的代码。这将让社区给你一个更好的答案。当我在下拉列表中添加值道具时,我收到了一个警告。有人能帮忙吗。警告:失败的道具类型:无效的道具
提供给
下拉列表
。我想它应该是值而不是值