如何修复多选的 Semantic-UI-React 下拉列表答案

【问题标题】：How to fix the Semantic-UI-React dropdown for multiple select如何修复多选的 Semantic-UI-React 下拉列表
【发布时间】：2019-09-23 11:39:06
【问题描述】：

下拉菜单中有一个“x”图标，该图标无法正常用于多标签选择。它不会在单击“x”时删除图层（尽管它正在对标签进行 2 次单击）。

我尝试添加一个额外的 OnRemove 函数，我可以在 React 开发者工具中看到它。

这是子组件

<div ref={node2 => (this.node2 = node2)}>
<Dropdown
 multiple
 search
 selection
 options={this.districtOptions}
 placeholder="Select..."
 onChange={(props, data, el) => {
 data.value.map(this.props.toggleLayer);
 console.log('The selected layer from dropdown is :'+data.value);
}}
/>
</div>

这个是控制器

toggleLayer = el => {
        const visibility = this.state.visibility;
        console.log(visibility);
        visibility[el] = !visibility[el];
        this.setState({
          visibility: visibility
        });
        this.setVisibility(el);
      };
    
      setVisibility(layer_id) {
        if (this.state.visibility[layer_id]) {
          this.map.setLayoutProperty(layer_id, "visibility", "visible");
        } else {
          this.map.setLayoutProperty(layer_id, "visibility", "none");
        }
        console.log('The selected layer is: ' + layer_id);
      }

我正在制作代码的代码框

https://codesandbox.io/s/fast-cache-ui2rp?fontsize=14

P.S - 语义 ui 反应依赖项在代码框中无法正常工作，但按钮在那里。 *在右上角*

如果您理解这一点并可以提供帮助，请分叉代码框并提供编辑。

【问题讨论】：

标签： reactjs calendar dropdown mapbox-gl-js semantic-ui-react

【解决方案1】：

<Dropdown
  multiple
  search
  selection
  options={this.districtOptions}
  placeholder="Select..."
  onChange={(props, data, el, i) => {
  let layers = data.value;
  let invisible_layers = this.districtOptions.filter((el) => {
  if (!data.value.includes(el)) {
     return el
  }
})
console.log(invisible_layers);
        
layers.forEach((el) => {
   console.log(this.props.state)
       if (!this.props.state[el]) {
          this.props.toggleLayer(el)
       }
     }
  )
 }
}

这也可以通过从图层数组中删除图层来完成。

layers.forEach((el) => {this.props.toggleLayer(el))
    while(layers.length > 0) {
    layers.pop();
}

【讨论】：