Отфильтровать значение из раскрывающегося списка reactjs - PullRequest
Новая
       24

Отфильтровать значение из раскрывающегося списка reactjs

0 голосов
/ 09 июля 2020

У меня на экране несколько карточек. Каждая карточка показывает строку как «Популярные» / «Последние» / « Старые ». Я получаю эти значения на карте из бэкэнда. Мне нужно реализовать опцию фильтра, которая фильтрует эти карты на основе популярности, старейшего и т. Д. c. Я делал это до сих пор, но не знаю, как фильтровать эти карты. 

<Dropdown
                          id="sorting"
                          items={this.sortOptions}
                          itemToString={(item) => (item ? item.label : "")}
                          onChange={this.onChange}
                          name="sorting"
                          label="All"
                          titleText="Sort"
                          type="default"
                        />
 sortOptions = [
    { value: "Popular", label: "Popular" },
    { value: "Old", label: "Old" },
    { value: "Latest", label: "Latest" },
  ];

Метод OnChange: 

onChange = (event) => {
    let filtered = this.sortOptions.filter(
      (val) => val.value === ProductState.Old
    );
    console.log("filtered", filtered);
  };

вывод на консоль: Object { value: "Old", label: "Old" } Но я хочу отфильтровать свои карты в зависимости от значения, выбранного в раскрывающемся списке. Может ли кто-нибудь мне с этим помочь.

Ответы [ 2 ]

1 голос
/ 09 июля 2020

Вам просто нужно изменить свою функцию onChange на это: 

   onChange = (event) => {
    let filtered = this.cardArray.filter( // change cardArray according to your name
      (card) => card.tag === event.value // change tag according to your card code
    );
   setCardArray(filtered) // change setCardarray according to your setState function
  };

Обычно вы фильтруете состояние своих карт, используя выбранное значение из раскрывающегося списка, и обновляете состояние карты с помощью фильтрованного массива.

Прямо сейчас вы используете функцию фильтра для неправильного массива.

0 голосов
/ 09 июля 2020

Я думаю, у вас сейчас проблема с локализацией данных.

Сначала убедитесь, откуда берутся данные, которые нужно отфильтровать, и где они хранятся.

The onChange метод только "реагирует" на ввод пользователя. Например, если вы открываете раскрывающийся список и выбираете вариант, запускается метод onChange. «Событие» в вашем методе onChange содержит параметр, на который вы только что нажали.

onChange = ( event ) => {

};

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

onChange = (event) => {

    console.log("dropDownOnChangeEvent", event);
  };

Теперь вам нужно использовать выбранный «sortOption», чтобы либо сделать правильный вызов серверной части, где вы получаете свои карты из, или, если у вас уже есть все данные в вашем браузере, примените метод фильтрации к этим данным.

...