Итак, вы хотите создать панель поиска в React JS. Прохладный!
Возможно, вы видели что-то вроде .indexOf (), но сегодня я покажу вам простой способ достижения этой цели для вашего приложения.
Логотип React JS
Шаг 1. Решите, где вы хотите отображать строку поиска.
Какой компонент вы хотите отрендерить JSX и отобразить на экране?
В этом примере я хотел бы отобразить панель поиска в моем компоненте Pet List, который содержит мою коллекцию домашних животных (массив домашних животных), которая находится в состоянии. Этот компонент Pet List получает Pets от своего родительского компонента, Pet Container, где состояние передается как реквизиты компоненту Pet List.
Чтобы создать панель поиска, мы пишем следующий HTML-код внутри JSX для рендеринга:
Сначала создайте тег фрагмента JSX для хранения вашего элемента. Затем напишите тег метки HTML. Включите атрибут htmlFor.
Затем используйте тег ввода HTML с атрибутом type, установленным на «text». Мы хотим сделать управляемый ввод, поэтому явно укажите атрибут value и назначьте его реквизитам, переданным от родительского компонента для входного значения. На следующем шаге мы предоставим этот ключ / значение нашему состоянию в родительском компоненте и передадим его для использования здесь.
Наконец, создайте атрибут onChange для обработки поиска. Мы создадим эту функцию в родительском контейнере и передадим ее в качестве реквизита для использования здесь, когда значение ввода в строке поиска изменяется в зависимости от ввода пользователя.
Шаг 2. Знайте, где вы держите State для этого компонента.
Будет ли ваша панель поиска находиться в том же компоненте, в котором находится ваше государство? Или ваше состояние будет в родительском?
Если панель поиска отображается в дочернем компоненте, вам все равно потребуется обработчик события onChange для состояния входных данных. Где это будет жить? Если она у вашего родителя, вы отправите функцию как реквизит.
Шаг 3: Создайте входное значение для поля поиска в вашем объекте State.
Например, я установил в качестве входного значения пустую строку в State в родительском компоненте:
Шаг 4. Создайте метод для обработки события при изменении для ввода вашей панели поиска.
Дескриптор метода изменения для ввода вашей панели поиска. Я рекомендую использовать функции ES6 Arrow, чтобы быть уверенным, что вы привяжете значение this. Поскольку этот метод обработчика изменений будет определен в родительском и будет нести ответственность за получение объекта события и установку состояния в родительском элементе, мы должны быть уверены, что он сохраняет свое значение 'this' для правильного использования метода this.setState ().
Внутри тела функции мы вызываем другую функцию для этого (родительского компонента) Set State, что позволит нам обновлять состояние, таким образом, не изменяя его напрямую (никогда не изменяйте состояние напрямую!).
В теле функции установленного состояния мы устанавливаем ключ входного значения, который определен в нашем текущем состоянии, чтобы получить значение цели события, которое мы передали в качестве аргумента дескриптору при изменении. Целевое значение события передается от дочернего компонента, который вызывает эту функцию каждый раз, когда обнаруживается изменение в поле ввода строки поиска, путем доступа к обратному вызову, поскольку он передается как реквизиты от родителя.
Горячий совет! Не забудьте консольный журнал! Вы можете быть уверены, что устанавливаете правильные связи от родителя к потомку и получаете значение цели события на входе.
Шаг 5: Передайте реквизит и протестируйте его по пути!
Чтобы проверить на этом этапе, убедитесь, что вы передаете состояние в качестве реквизита для входного значения, а также дескриптор функции изменения для поля ввода панели поиска в качестве реквизита для дочернего компонента, например:
Шаг 6: Создайте метод поиска и подключите его!
Для этого мы будем использовать методы Filter & Includes, а не Index Of.
А теперь самое интересное. На самом деле ищу!
Мы собираемся создать переменную с именем Filtered Pets, возвращаемое значение которой будет массивом отфильтрованных домашних животных, отфильтрованных на основе ключа входного значения из состояния, которое было обновлено обработчиком при изменении, который вызывается в поле ввода поиска. бар.
MDN объясняет, что «метод filter() создает новый массив со всеми элементами, которые проходят проверку, реализованную предоставленной функцией».
Мы обязательно определим эту переменную после метода жизненного цикла рендеринга в нашем компоненте класса Pet Container и перед оператором return. Мы будем использовать переменную внутри метода return, чтобы передать ее в качестве аргумента нашей функции обратного вызова для обработчика сортировки, которую мы передаем как свойства дочернему компоненту Pet List. Это сделано для того, чтобы мы могли иметь массив домашних животных в состоянии родителя (контейнер для домашних животных), доступный в качестве реквизита для дочернего элемента (список домашних животных), и поэтому этот массив будет как отсортирован, так и отфильтрован для поиска, в зависимости от того, так ли это.
Filtered Pets вызовет функцию .filter () для массива домашних животных, который находится в состоянии, фильтруя массив и для каждого домашнего животного в массиве, проверяя условие. Метод фильтра проверяет условие и возвращает логическое значение.
Для каждого питомца мы хотим вернуть это домашнее животное в массив, вызвать метод в нижний регистр для учета заглавных букв, затем вызвать метод include, передав состояние цели события ключа входного значения, другими словами, цель события значение, которое мы получили от обработчика при изменении в поле ввода нашей панели поиска. Метод Include работает с массивами и объектами типа массивов.
Согласно MDN, includes() метод определяет, включает ли массив определенное значение среди своих записей, возвращая true или false в зависимости от ситуации.
И от гиков для гиков:
В JavaScript includes () метод определяет, содержит ли строка указанные символы или нет. Этот метод возвращает истину, если строка содержит символы, в противном случае возвращает ложь.
И из W3School: Включает: Возвращаемое значение: Логическое значение. Возвращает true, если строка содержит значение, в противном случае возвращает false
Здесь мы также должны вызвать метод перевода в нижний регистр, опять же, чтобы учесть заглавные буквы, на этот раз введенные пользователем.
Условие, по которому мы выполняем фильтрацию, - это проверить, включает ли какой-либо массив домашних животных в состоянии ввод в порядке, введенном в строку поиска, и если да, то возвращение этого питомца в новый массив, если оно соответствует условию. Таким образом, возвращаемое значение будет новым массивом только домашних животных, которые удовлетворяют условию включения ввода значения поиска.
Поскольку мы устанавливаем эту функцию обратного вызова для переменной, у нас есть доступ к возвращаемому значению функции (массиву отфильтрованных домашних животных), которое мы затем можем вызвать для использования и передать в другую функцию (сортировку!) В качестве аргумента. Затем мы можем передать их вместе как свойства дочернему компоненту.
Мы хотим это учитывать, потому что хотим, чтобы наш пользователь мог как сортировать, так и искать в нашей коллекции домашних животных. Таким образом, свойство pets, которое мы передаем компоненту Pet List, будет содержать домашних животных в состоянии, которые были отсортированы и найдены, если это так!
Коллекции - это весело! И тем более, когда вы можете искать в них.
Если вам интересно, как метод include работает под капотом, с алгоритмической точки зрения, я тоже. MDN говорит:
Расчетный индекс меньше 0
Если fromIndex отрицательно, вычисленный индекс рассчитывается для использования в качестве позиции в массиве, с которой начинается поиск valueToFind. Если вычисленный индекс меньше или равен -1 * array.length, будет выполнен поиск по всему массиву.
// array length is 3 // fromIndex is -100 // computed index is 3 + (-100) = -97var arr = ['a', 'b', 'c'];arr.includes('a', -100); // true arr.includes('b', -100); // true arr.includes('c', -100); // true arr.includes('a', -2); // false
includes() используется как общий метод
includes() метод намеренно общий. Не требуется, чтобы значение this было объектом массива, поэтому его можно применять к другим типам объектов (например, к объектам, подобным массивам). В приведенном ниже примере показан метод includes(), вызываемый для объекта arguments функции.
(function() {
console.log([].includes.call(arguments, 'a')); // true
console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');В разных JS-движках Includes реализованы по-разному. Поэтому я не уверен, какой алгоритм он использует для поиска строк, является ли он двоичным или линейным, и как он работает, но, пожалуйста, дайте мне знать, если узнаете.
И вот что мы создали в действии. Я создал это приложение для усыновления домашних животных, Doggo-doption, вместе со своей замечательной женой, Дарьей Танриверди, в школе Flatiron.
Ресурсы:
