如何修复多个 select 的语义-UI-React 下拉列表

Question

下拉菜单有一个 'x' 图标，该图标对于多个标签 select 无法正常工作。它不会在单击 '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);
      }

我正在制作代码的codesandbox

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

P.S - 语义 ui 反应依赖在 codesandbox 中不能正常工作，但按钮在那里。 *在右上角*

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

Answer 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();
}

如何修复多个 select 的语义-UI-React 下拉列表

How to fix the Semantic-UI-React dropdown for multiple select

calendar

reactjs

mapbox-gl-js

dropdown

semantic-ui-react