В рамках идеи вашего веб-сайта вы можете захотеть отобразить список элементов / информации из API в DOM. Если вы посмотрите на некоторые примеры существующих веб-сайтов, например, интернет-магазин одежды, они, вероятно, предоставят пользователю способы фильтрации элементов, которые они видят на странице.
Существует несколько типов тегов HTML / JSX, которые могут помочь с фильтрацией, например флажки, раскрывающиеся меню, поле поиска по типу ..
Какой бы тип вы ни выбрали, функциональность реализуется одинаково.
Мне было полезно записать процесс и придумать эти твердые шаги. Вы можете выполнить одни и те же шаги / процессы для каждого типа, чтобы функциональность заработала.
Обзор ШАГОВ:
- добавить правильный HTML-тег ввода
- установить / создать начальное состояние
- сделать функцию для изменения состояния
- поместите обработчик событий во входной тег
- отправьте созданную нами функцию «изменить состояние» в обработчик событий и присоедините к обработчику событий.
- отправить состояние обработчику событий, чтобы мы могли синхронизировать текущее состояние с тем, что отображает тег ввода
- сделать функцию для фильтрации всех элементов
- Настройте раздел render () в компоненте, в котором содержится состояние, для отправки отфильтрованных элементов дочерним компонентам, которые их отображают, а не всем элементам.
Вот пример реализации флажка, раскрывающегося меню и строки поискового запроса для магазина одежды, который я создаю в React:
Вот как выглядит json каждого отдельного предмета одежды:
Поскольку plussize является логическим, мы можем использовать для этого флажок, поскольку для этого есть только два возможных результата - плюс размер или не плюс размер (истина / ложь).
Для атрибутов с более чем двумя возможными результатами мы можем выбрать что-нибудь еще, например раскрывающееся меню или строку поиска.
Теперь давайте рассмотрим каждый шаг выше, чтобы увидеть, что мы сделали для каждого из них:
(см. выше) Я добавил теги для полей ввода в свой компонент «Продукты», так как именно здесь я решил установить состояние. Я решил установить здесь состояние, так как хочу отфильтровать элементы перед отправкой их другим компонентам для рендеринга. Когда мы запускаем npm start, приведенный выше код выглядит следующим образом:
Далее нужно установить / создать начальное состояние:
В этом примере 'products' - это полный импортированный список продуктов json, 'showPlusSized' относится к начальному состоянию флажков, которое может быть только истинным или ложным, но мы хотим начать как false, что предполагает, что флажок снят. пользователем еще не отфильтровано, searchTerm относится к полю ввода поля поиска типа, которое должно начинаться как пустая строка, поскольку пользователь еще ничего не набрал, а filterBy относится к раскрывающемуся меню , который я хочу иметь 3 варианта: «Все», «Мужские» и «Женские», но мы хотим, чтобы он начинался со «Все», что предполагает, что фильтрация еще не выбрана.
Теперь мы можем написать несколько функций для изменения состояния каждой из них:
Поскольку показываем ли мы plussized или нет, является логическим, мы можем создать функцию, которая будет переключаться между установкой состояния как истинное или ложное, установив состояние как противоположное текущему (используя символ «! »). Это означает, что если в настоящий момент он имеет значение true, будет установлено значение false, и наоборот. Для двух других типов ввода мы полагаемся на цель события (то, что пользователь выбирает / вводит), чтобы получить значение для фильтрации.
Теперь поместим обработчики событий на элементы ввода:
Выше я сделал несколько шагов за один. Я добавил обработчики событий (onChange) к каждому. Следующим шагом была бы отправка функций состояния обновления обработчикам событий, но для меня эти функции уже были основаны на том же компоненте. Обычно я бы сказал передать текущее состояние компоненту, в котором находятся обработчики событий, но, опять же, для этого проекта все они находятся в компоненте.
Я ввел ассоциированное текущее состояние как параметр checked = для флажков и значение = для раскрывающегося меню. Теперь, если вы перейдете на http: // localhost: 3000 и откроете devTools, перейдите на вкладку компонент и нажмите Продукты (или имя компонента, с которым вы имеете дело, в состоянии ). Когда вы выбираете вариант (кроме Все) в раскрывающемся меню, вводите что-то в поле поиска типа или устанавливаете флажок, вы должны увидеть обновление состояния в DevTools, а также при изменении вручную state в devTools, вы должны увидеть, как отображение DOM меняется в соответствии с текущим состоянием. Здорово! Это означает, что наши функции состояния обновления работают.
* Если вы не видите вкладку компонента в своих инструментах разработчика, вам необходимо получить ее, чтобы вы могли анализировать / отлаживать состояние и изменения состояния в своем приложении React. Это доступно для Chrome или Firefox. Если у вас установлен Chrome, вы можете перейти по этой ссылке:
Если у вас установлен Firefox, вы можете перейти по этой ссылке:
Https://addons.mozilla.org/en-US/firefox/addon/react-devtools/
Теперь давайте сделаем функции для фильтрации элементов:
Я установил 2 функции, которые принимают аргумент данного списка продуктов, это означает, что мы сможем передать одну функцию фильтра в следующую в качестве аргумента, чтобы гарантировать, что мы передаем все фильтры по продуктам перед отправкой. результирующие продукты в компонент Product для визуализации.
И первая, и последняя функции используют тернарный оператор (сокращение от оператора if / else). Первый говорит, что если this.state.showPlusSized истинно, то фильтруйте продукты, если нет, то продолжайте показывать все продукты. В троичной системе, если текущее состояние написано перед знаком «?» без указания других условий, тогда он спрашивает, правда ли что-то. Если состояние ИСТИНА, то будет возвращена опция перед «:», а если ложь, то будет возвращена последняя. Средняя функция просто настроена на постоянную фильтрацию, в зависимости от того, какие символы были набраны, если таковые имеются.
Затем мы хотим объединить все фильтры, чтобы создать общий список элементов для отображения на странице. В React каждый раз при обновлении состояния компонент будет повторно отрисовываться, что делает наше приложение динамичным. Передача одной функции в другую в качестве аргументов будет выглядеть так:
Теперь мы можем использовать этот новый список searchbarDropdownCheckboxFiltered вместо того, где раньше находился «products», чтобы передать его в качестве продуктов, которые будут отображаться в моем компоненте Product:
Теперь перейдите на http: // localhost: 3000 и проверьте работоспособность! Мы должны иметь возможность фильтровать по одному, двум или всем фильтрам за раз.
Интересный материал !!!
