Reactjs 语义反应ui下拉列表多选:选择全部的选项
我正在开发一个基于hook的react应用程序,对于multi-select下拉菜单,我使用react语义ui下拉菜单。但没有选择所有项目的选项。如何做到这一点?单击Select(选择)时,应选择所有项目,且不显示在下拉列表中:-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:
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);
}
};
请包括您已有的代码。这将让社区给你一个更好的答案。当我在下拉列表中添加值道具时,我收到了一个警告。有人能帮忙吗。警告:失败的道具类型:无效的道具
值提供给下拉列表。我想它应该是值而不是值