Сколько себя помню, я всегда любил читать. В детстве я любил ходить в библиотеки и книжные магазины и видеть бесконечные полки с книгами. Все эти варианты того, что я мог выбрать для чтения, казались захватывающими и обширными. Перенесемся ко мне, когда я взрослый зашел в библиотеку или книжный магазин и увидел одни и те же бесконечные полки с книгами; теперь библиотеки и книжные магазины — мой Бурмудский треугольник. Как только я захожу в библиотеку или книжный магазин, я не могу вспомнить ни одну из книг, которые я хотел прочитать, или ни одну из книжных рекомендаций от моих друзей. Мой разум идет B L A N K.
Исследования показали, что слишком большой выбор фактически мешает нам принимать взвешенные решения (о чем вы можете узнать больше, прослушав здесь).
Именно эта головоломка привела меня к созданию моего приложения BookMark (React/Redux, бэкэнд Rails и использование NYT API), где пользователи могут просматривать списки бестселлеров New York Times по жанрам, получать некоторую информацию о каждой книге, читать обзор книги, сделать заметку о книге и щелкнуть карточку книги, чтобы сохранить книгу в свой «список чтения».
Функция поиска
После того, как я создал основы своего приложения, я хотел создать функцию поиска, чтобы пользователи могли искать в своих сохраненных книгах, вводя поисковый запрос.
Структура React сделала это бесшовным, потому что React основан на компонентах, что означает, что вы можете создать компонент поиска и подключить этот компонент туда, где вы хотите, чтобы окно поиска отображалось.
Я начал с тщательного поиска в Интернете того, как другие люди выполняли поиск в своих приложениях React. Просмотрев множество примеров и кода, я выбрал наилучший подход, наиболее подходящий для моего приложения.
Затем я начал составлять список того, что мне нужно сделать, чтобы реализовать эту функциональность.
- Создать компонент поиска — создайте простое окно поиска, используя
<form>и<input>. - Поместите компонент «Поиск» в компонент «Пользовательские книги» (где вы можете увидеть список книг пользователя).
- Привяжите ввод поиска (термин поиска) из компонента «Поиск» к компоненту «UserBooks».
- Создайте логику: как мне отфильтровать список пользовательских книг в соответствии с поисковым запросом и написать функцию (ы).
- Протестируйте, чтобы убедиться, что функциональность работает.
Шаг 1. Я создал простой презентационный компонент поиска, который принимает пользовательский ввод. Я знал, что каждый раз, когда пользователь что-то вводит в поле, мне хотелось активировать функцию поиска. Я знал, что для этого мне нужно создать обработчик события onChange, чтобы, когда придет время, я мог отправить этот ввод в мою еще не написанную функцию поиска.
Шаг 2. Затем я решил разместить компонент в верхней части моего компонента UserBooks, чтобы окно поиска отображалось в верхней части этого компонента.
Шаг 3. Поскольку мой компонент поиска является дочерним компонентом компонента UserBooks, мне нужно было каким-то образом найти способ передать поисковый запрос компоненту UserBooks. Я сделал это, создав функцию callback() в компоненте UserBooks и передав ее компоненту поиска через реквизиты, а затем установив то, что я получил, обратно в локальное состояние UserBooks.
В моем компоненте поиска я использовал обработчик событий onChange и использовал свой обратный вызов внутри onChange следующим образом:
const Search = (props) => { return ( <> <form> <input placeholder="Search for..." onChange={(event)=>props.callback(event.target.value)} /> </form> </> )}и в моем компоненте UserBooks:
callback = (term ) => { this.setState({ term: term }) }Теперь мой поисковый запрос связан с моим компонентом UserBooks.
Шаг 4. Я знал, что в своем компоненте UserBooks я уже отображал все книги пользователя, поэтому мне нужно найти способ отфильтровать книги, которые не соответствуют поисковому запросу пользователя, чтобы остались только те книги, которые соответствуют поисковому запросу пользователя. показывает. Мне также нужно было выяснить, что я хочу, чтобы поисковый запрос выполнял поиск (имя автора, название, описание книги, примечание пользователя о книге).
Я решил, что хочу, чтобы поиск работал по всем атрибутам книги. Я начал с того, что нарисовал то, что я хотел, чтобы произошло.
Отображаются книги пользователя (с окном поиска) => вводится критерий поиска => какая-либо функция фильтра => книги пользователя, соответствующие критерию поиска, остаются отображенными.
В моем компоненте UserBooks я уже перебирал список книг пользователя и передавал каждую книгу компоненту UserBookCard, поэтому я знал, что это будет место для размещения моей логики фильтра поиска. Я начал с написания функции фильтра, которая принимала бы книгу и поисковый запрос в качестве аргументов.
filterIt = (book, searchTerm) => { return book.title.includes(searchTerm) || book.author.includes(searchTerm) || book.description.includes(searchTerm) }Приведенный выше код берет книгу и проверяет, есть ли в книге символы вашего поискового запроса. Метод include() возвращает логическое значение в зависимости от того, содержит ли строка введенные вами символы. Если строка содержит введенные вами символы, метод возвращает значение true. Я говорю, что в моей функции filterIt() возвращайте книгу, если какой-либо из атрибутов книги включает поисковый запрос. *Важно отметить, что .includes() чувствителен к регистру, поэтому вам придется использовать .toLowerCase() для входных данных и атрибутов книги.
Итак, теперь у меня есть функция filterIt(), которая возвращает книгу, в которой есть поисковый запрос. ЧТО ТЕПЕРЬ.
Имея список книг, которые у меня уже есть, и книги, возвращаемые моей функцией filterIt(), я могу использовать метод .filter(), который создает массив, заполненный всеми элементами массива, прошедшими проверку (предоставляемыми как function)», чтобы получить книги пользователя, содержащие поисковый запрос, а затем выполнить итерацию по отфильтрованному списку и передать книгу моему компоненту UserBookCard следующим образом:
const booksList = books.filter(this.filterIt(this.state.term)).map(book => {return (<UserBookCard key={book.id} book={book} deleteUserBook={this.props.deleteUserBook} userId={this.props.user} addBookNote={this.props.addBookNote} />) } )Шаг 5. Тестирование. Отладка. Тестирование. Отладка. Тестирование.
Результат
А вот как это выглядит в действии!
Спасибо за чтение и удачного кодирования!
Первоначально опубликовано на https://dev.to.
