Reactjs 反应语义UI-多选复选框下拉列表

我想在react with es6中构建一个多选复选框下拉列表 我的要求如下图所示

---

我尝试过这样做，但不起作用。

您可以使用一个父组件，该组件将值保持在其状态并切换列表项。然后，您可以为每个列表项创建组件，该组件将使活动属性保持在可在单击时切换的状态

类ListItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={active:false}
}
render（）{
返回(
)
}
}
类选择扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
显示列表：错误，
值：[]
}
this.handleItemClick=this.handleItemClick.bind（this）
}
componentDidMount（）{
document.addEventListener（'mousedown'，（e）=>{
如果（！this.node.contains（e.target））{
this.setState（{showList:false}）
}
})
}
组件将卸载（）{
document.removeEventListener（'mousedown'）；
}
renderValue（）{
设{value}=this.state；
如果（！value.length）返回“选择…”
else返回值。join（“，”）
}
切换列表（）{
this.setState（prevState=>（{showList:！prevState.showList}））
}
handleItemClick（活动，val）{
设{value}=this.state；
如果（活动）值=[…值，val]
else value=value.filter（e=>e！=val）；
this.setState（{value}）
}
render（）{
返回(
this.node=node}
className=“选择”>
{this.renderValue（）}
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
按钮{
背景：白色；
宽度：100%；
填充：10px 15px；
边框：1px实心rgba（0,0,0,1）；
边界半径：5px；
光标：指针；
文本对齐：左对齐；
}
.从列表中选择{
宽度：100%；
背景：白色；
边框：1px实心rgba（0,0,0,1）；
边界半径：5px；
}
.选择一个列表{
填充：10px 15px；
显示器：flex；
颜色：黑色；
文字装饰：无；
位置：相对位置；
对齐项目：居中；
}
.选择列表a:之前{
宽度：15px；
高度：15px；
内容：''；
边框：1px实心rgba（0,0,0,1）；
边界半径：5px；
右边距：10px；
显示：块；
}
.选择列表a.选择：在{
背景#0493D1；
内容:'✓';
颜色：白色；
字体大小：11px；
文本对齐：居中；
线高：15px；
}
.隐藏{
显示：无；
}
您可以使用一个父组件将值保持在其状态并切换列表项。然后，您可以为每个列表项创建组件，该组件将使活动属性保持在可在单击时切换的状态


类ListItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={active:false}
}
render（）{
返回(
)
}
}
类选择扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
显示列表：错误，
值：[]
}
this.handleItemClick=this.handleItemClick.bind（this）
}
componentDidMount（）{
document.addEventListener（'mousedown'，（e）=>{
如果（！this.node.contains（e.target））{
this.setState（{showList:false}）
}
})
}
组件将卸载（）{
document.removeEventListener（'mousedown'）；
}
renderValue（）{
设{value}=this.state；
如果（！value.length）返回“选择…”
else返回值。join（“，”）
}
切换列表（）{
this.setState（prevState=>（{showList:！prevState.showList}））
}
handleItemClick（活动，val）{
设{value}=this.state；
如果（活动）值=[…值，val]
else value=value.filter（e=>e！=val）；
this.setState（{value}）
}
render（）{
返回(
this.node=node}
className=“选择”>
{this.renderValue（）}
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
按钮{
背景：白色；
宽度：100%；
填充：10px 15px；
边框：1px实心rgba（0,0,0,1）；
边界半径：5px；
光标：指针；
文本对齐：左对齐；
}
.从列表中选择{
宽度：100%；
背景：白色；
边框：1px实心rgba（0,0,0,1）；
边界半径：5px；
}
.选择一个列表{
填充：10px 15px；
显示器：flex；
颜色：黑色；
文字装饰：无；
位置：相对位置；
对齐项目：居中；
}
.选择列表a:之前{
宽度：15px；
高度：15px；
内容：''；
边框：1px实心rgba（0,0,0,1）；
边界半径：5px；
右边距：10px；
显示：块；
}
.选择列表a.选择：在{
背景#0493D1；
内容:'✓';
颜色：白色；
字体大小：11px；
文本对齐：居中；
线高：15px；
}
.隐藏{
显示：无；
}

我尝试了语义用户界面，但没有找到任何类似的下拉列表我尝试了语义用户界面，但没有找到任何类似的下拉列表感谢您的重播，但下拉列表用户界面没有反映在应答文档中。removeEventListener（“mousedown”）；每当我从一个组件切换到另一个组件时，这些行都会给我错误。“未能对'EventTarget'执行'removeEventListener'：需要2个参数，但只存在1个。”我将一个空函数作为第二个参数传递，问题已得到解决，但现在每当我切换组件时，它都会在componentDidMount（）函数“TypeError:无法读取属性'contains'为null”上显示错误。请帮助我@nenadvarcarth问题可能来自于我在
componentDidMount
上使用的文档上的事件侦听器，这是当您在它之外单击时关闭模式的选项。但是如果没有代码示例，我无法确切地告诉您为什么会发生这种情况。应在
组件卸载时删除事件侦听器