Блог

У меня есть выпадающий компонент, как показано ниже: (Для воспроизведения перейдите по этой ссылке)

Я хочу добавить search to filter functionality , что позволяет фильтровать выпадающие элементы на основе запроса: this.DropDownElements.includes(searchParameter) . constructor(props) { super(props);

         this.DropDownElements = this.props.Values.map((element,ind) => ({
            value: element,
            isChecked: false,
            id: "DropdownElems:"   this.props.UniqueIdentifier   ind,

        }));

        this.ConstantDropDownElements = this.props.Values.map((element,ind) => ({
            value: element,
            isChecked: false,
            id: "DropdownElems:"   this.props.UniqueIdentifier   ind,

        }));
    }
  

Я сохраняю searchParameter значение this.state.Value в.

 state = {

        isEditing: false,
        isFirstOnChange: true,
        isDropDownOpen: false,
        isMultiSelectOn: true,
        elements: this.DropDownElements,
        placeholder: this.props.PlaceHolderText,
        Value: "",
        GlobalFilters: [
                                {
                                    selection: "Select All",
                                    isSelected: false,
                                },
                                {
                                    selection: "Clear All",
                                    isSelected: false,
                                },
                        ],

    };
  

Теперь начинается сложная часть. Когда я выполняю поиск в окне поиска, я хочу выполнить автофильтр, а затем сделать выбор. То, что я пробовал, — это создание неизмененного выпадающего списка, инициализированного в constructor , а затем фильтрация на DropDownElements основе переданного параметра поиска. Но тогда сопоставление isChecked ключа объекта становится для меня очень сложным. У кого-нибудь есть простое решение и подход для того же?

Мой текущий компонент позволяет выбирать и отменять выбор без потери состояния (во время сворачивания и открытия выпадающего списка), моя конечная цель — добавить функцию поискового запроса, которая фильтрует данные, а затем, когда я делаю выбор, он должен быть правильно сопоставлен с правильным элементом DropDownElements .