[英]How to build semantic-ui dropdown which includes header dynamically?
I have dropdown options as我有下拉选项
const options = [
{ key: '1', text: 'Example 1', value: 'Example 1', type:'ABC' },
{ key: '2', text: 'Example 2', value: 'Example 2', type:'XYZ' },
{ key: '3', text: 'Example 3', value: 'Example 3', type:'ABC' },
{ key: '4', text: 'Example 4', value: 'Example 4', type:'XYZ' },
];
I want to build semantic-ui dropdown dynamically such that,each dropdown value will come under their respective 'type' value.我想动态构建语义-ui 下拉列表,以便每个下拉列表值都位于它们各自的“类型”值之下。
In this case Example 1,Example 3 will come under 'ABC' Header tag, and Example 2,Example 4 under 'XYZ' Header tag.在这种情况下,示例 1、示例 3 将位于“ABC”Header 标签下,示例 2、示例 4 将位于“XYZ”Header 标签下。
ABC
Example 2
Example 4
XYZ
Example 2
Example 4
I tried to solve it by following way.我试图通过以下方式解决它。 First get all distinct categories of array of option.
首先获取选项数组的所有不同类别。
categories = options.reduce((acc,curr)=> !acc.includes(curr.type)? [...acc,curr.type]: [...acc] ,[]).slice()
Then I need to map all possible json to it's respective type然后我需要 map 所有可能的 json 到它各自的类型
categories.map(x=>{
resOption[x]= options.filter(j => j.type===x).slice()
})
My full code here我的完整代码在这里
var resOption = {}
var categories =[]
categories = options.reduce((acc,curr)=> !acc.includes(curr.type)? [...acc,curr.type]: [...acc] ,[]).slice()
categories.map(x=>{
resOption[x]= options.filter(j => j.type===x).slice()
})
return(
<Dropdown selection >
<Dropdown.Menu>
{
Object.keys(resOption).map((type)=>(
<React.Fragment>
<Dropdown.Header content={type} style={{color:"#5aa7e6"}} />
{
resOption[type].map((option)=>(
<Dropdown.Item text={option.text} value={option.value} onClick={onChange} />
))
}
<Dropdown.Divider />
</React.Fragment>
))
}
</Dropdown.Menu>
</Dropdown>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.