如何修复多选项的语义UI反应下拉菜单

Question

下拉菜单中有一个'x'图标，该图标在选择多个标签时无法正常工作。它并不会删除单击“ x”的图层（尽管正在单击标签两次）。

我尝试添加一个额外的OnRemove函数，我可以在React Developer Tools中看到它。

这是子组件

```<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);
              }}
              // onRemove={}
            />
          </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

PS-语义ui react依赖关系在codeandbox中无法正常工作，但是按钮在那里。 *在右上角*

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

一个额外的帮助-我必须使日历日期范围基于图层可见性，并向滑块添加相同的功能。我应该如何处理？

例如，当startDate和endDate在10月时，应显示1st层，11月= 2nd层，12月= 3rd层，1月= 4层，2月= 5层。]

预期结果-当我们单击下拉菜单中的标签uttarakhand（或jnk）时，应添加图层，而当我们单击所选标签的关闭图标时，应同时删除该图层。

下拉菜单中有一个'x'图标，该图标在选择多个标签时无法正常工作。它并不会删除单击“ x”的图层（尽管正在单击标签两次）。我尝试过...

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)
                      }

                    })
                    }
                  }
                  // onClose={(e, data) => {
                  //   console.log('e==', e)
                  //   console.log('data==', data)
                  //   if (data.length > 0) {
                  //     data.forEach((el) => {
                  //       console.log(el)
                  //     })
                  //   } else {
                  //     Object.keys(this.props.state).forEach(el => {
                  //       this.props.toggleLayer(el)
                  //     })
                  //   }
                  // }}              
                />