Office Fabric UI multi select выпадающий список выберите все - PullRequest
0 голосов
/ 25 марта 2019

поскольку пользовательский интерфейс Office Fabric не имеет этой функции, я пытался создать ее, потому что она нам нужна. но это не сработало так, как должно. Я добавил ключ «Все», поэтому, когда я выбираю его, я добавляю все свои массивы мест в массив опций выбора и, наконец, устанавливаю его в состояние. в настоящее время он устанавливается в состоянии, но элементы не проверяются, даже если состояние уже обновлено для всех объектов. Я что-то пропустил?

это мой код:

if(selectedOption.key == 'All'){
  let updatedSelectedItems = this.state.selectedVenues ? lodash.clone(this.state.selectedVenues) : [];
  let selectedVenueOps: IDropdownOption[] = [];
  if(selectedOption.selected){
    this.state.venues.forEach(v => {
      if(v.key !== 'All'){
        updatedSelectedItems.push(v.key.toString());
      }
      selectedVenueOps.push(v);
    });
  } else {
    this.state.venues.forEach(v => {
      let currIndex = updatedSelectedItems.indexOf(v.key.toString());
      if (currIndex > -1) {
        updatedSelectedItems.splice(currIndex, 1);
        selectedVenueOps.splice(currIndex, 1);
      }
    });
  }
  this.setState({
    selectedVenues: updatedSelectedItems,
    selectedVenueOptions: selectedVenueOps
  });
} else {
  let updatedSelectedItems = this.state.selectedVenues ? lodash.clone(this.state.selectedVenues) : [];
  let selectedVenueOps: IDropdownOption[] = [];
  if (selectedOption.selected) {
    updatedSelectedItems.push(selectedOption.key.toString());
    selectedVenueOps.push(selectedOption);
  } else {
    // remove the option if it's unchecked
    let currIndex = updatedSelectedItems.indexOf(selectedOption.key.toString());
    if (currIndex > -1) {
      updatedSelectedItems.splice(currIndex, 1);
      selectedVenueOps.splice(currIndex, 1);
    }
  }

  this.setState({
    selectedVenues: updatedSelectedItems,
    selectedVenueOptions: selectedVenueOps
  });
}  

enter image description here

enter image description here

...