Этот блог предназначен для людей, которые имеют базовое представление о react.js.

В этом блоге мы собираемся создать простое приложение на react.js, которое будет отображать панель поиска вверху и список названий цветов внизу, то есть наши поддельные данные. Панель поиска позволит нам ввести текст в поле ввода, которое будет искать наши поддельные данные и мгновенно отображать названия цветов на экране. Для этого мы будем использовать компоненты на основе классов.

Начиная

Чтобы создать новый проект реакции, запустите:

Удалите все ненужные файлы, как показано ниже:

Создайте подпапку компонента в папке src. Затем создайте два дочерних компонента с именами FlowersContainer и SearchBar.

Используйте следующий код для стилизации CSS. Вы можете изменить стиль приложения по своему усмотрению.

Компонент установки приложения

App.js будет вашим основным компонентом, в котором будут храниться все ваши данные и методы экземпляра. Смотрите изображение ниже для моего кода.

Теперь давайте разберем этот код!

Строка 7: состояние

В нашем объекте состояния у нас есть состояние «цветы», значение которого имеет массив имен цветов. У нас также есть состояние «searchTerm», в котором в качестве значения используется пустая строка, которая будет представлять поисковый запрос, который мы будем вводить в поле ввода поиска.

Строка 21: функция handleSearchTermChange

Функция handleSearchTermChange будет передана как опора в компоненте SeachBar. При запуске setState обновит значение searchTerm.

Строка 25: функция filterFlower

Функция filterFlower будет нашей функцией обратного вызова, которая будет передана в методе фильтрации ниже. Метод toLowerCase () преобразует строки в нижний регистр. Метод split () разделит строку на подстроки в каждом пробеле в строке и поместит подстроки в массив. Затем метод join () возьмет этот массив строк и объединит их в одну строку без пробелов. Когда пользователь вводит текст в поле ввода, ввод может быть нечувствительным к регистру и игнорировать пустые места в названиях цветов с несколькими словами. Возможно, вы заметили, что мы также включили в цветок «indexOf (normalized)! == -1». Это проверяет, существует ли строка, которую мы набираем, в именах цветов.

Строка 30: JSX

В методе рендеринга компонента App у нас есть дочерний компонент SearchBar, а также наши методы filter и map с переданным компонентом FlowersContainer. Метод filter создаст новый массив со всеми именами цветов, которые проходят тест, который является нашей функцией filterFlower. Затем мы вызываем метод карты, который принимает наш отфильтрованный массив цветов для разбора на отдельные цветочные компоненты.

Создать компонент FlowersContainer

Компонент FlowersContainer будет отображать элементы, похожие на то, что мы вводим в поле ввода поиска.

Создать компонент SearchBar

Компонент SearchBar содержит событие onChange, которое передает нашу функцию handleSearchTermChange, которая устанавливает для searchTerm значение «e.target.value». Когда мы вводим текст в поле ввода поиска, setState запускается в handleSearchTermChange, после чего наш компонент App повторно отрисовывается.

Ваш конечный продукт должен выглядеть так:

Вот оно что! Надеюсь, вам понравился мой небольшой урок. Это лишь один из многих способов создать панель поиска в react.js.

Ресурсы: