Как исправить выпадающий список Semantic-UI-React для множественного выбора - PullRequest
Новая
       54

Как исправить выпадающий список Semantic-UI-React для множественного выбора

0 голосов
/ 23 сентября 2019

В выпадающем меню есть значок «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);
              }}
              // 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- Зависимость семантической реакции пользовательского интерфейса не работает должным образом в кодах и окнах, но кнопки есть.* в правом верхнем углу *

Пожалуйста, разветвите коды и поле и внесите изменения, если вы понимаете это и можете помочь.

Еще одна помощь - мне нужно сделать видимость слоя на основе диапазона календарных дат и добавитьта же функциональность для слайдера.Как мне подойти к этому?

Например, когда startDate и endDate находятся в октябре, должен отображаться 1-й слой, в ноябре = 2-й слой, в декабре = 3-й слой, в январе = 4-й слой, в феврале = 5-йСлой.

Ожидаемый результат - Когда мы щелкаем по метке uttarakhand (или jnk) в раскрывающемся списке, слои должны быть добавлены, а когда мы щелкаем по значку закрытия выбранной метки, этот слой должен быть удален одновременно.

1 Ответ

0 голосов
/ 27 сентября 2019 
    ```
    <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)
                  //     })
                  //   }
                  // }}              
                />



***This can also be done by removing layers from the layers array.***
***Like: ***





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