Как создать компонент тегов с автозаполнением на React
В этом руководстве мы создадим компонент ввода тегов с автозаполнением, используя React JS без сторонних библиотек.
117 открытий2К показов
Это перевод статьи — оригинал взят отсюда.
В этом руководстве мы расскажем, как создать компонент тегов на React Java Script без использования сторонних библиотек. Показываем, как управлять состоянием, динамически фильтровать предложения и эффективно обрабатывать взаимодействия пользователя, такие как добавление и удаление тегов. Идеально подходит для разработчиков, которые хотят реализовать ввод тегов с минимальными зависимостями и гибким дизайном.
Сетап проекта
Мы будем использовать Vite.js для быстрой и простой сборки проекта. Vite обеспечивает мгновенную перезагрузку модулей, улучшенную производительность и более быструю сборку по сравнению с традиционными сборщиками.
Создаем новый проект на базе Vite:
После установки:
Очистите проект
Удалите файл App.css. А еще удалите все данные из файла App.tsx:
Теперь создайте папку components внутри папки src.
Создайте компонент тегов
Создайте файл TextInput.tsx в папке компонентов:
Объяснение
- Поле ввода захватывает текст пользователя, фильтруя предварительно заданные предложения (массив предложений).
- Отфильтрованные предложения отображаются в виде выпадающего списка. Нажатие на предложение или клавишу Enter добавляет его в список тегов.
- Добавленные теги отображаются с возможностью их удаления.
Стилизация компонента
Удалите все из файла index.css и вставьте следующий код:
Проверим:
У нас почти готовый компонент для добавления тегов, но в нём есть одна небольшая ошибка. Сейчас можно добавлять дублирующиеся теги в поле ввода. Чтобы это исправить, нам нужно изменить функцию handleKeydown().
Теперь можно добавлять только уникальные теги.
Создайте компонент автозаполения
Создайте файл AutoComplete.tsx в папке компоненты:
Ключевые особенности
- Автозаполнение предложений. Компонент предоставляет список предложений на основе ввода пользователя. Когда пользователь вводит текст в поле, происходит фильтрация возможных значений, и отображаются совпадающие предложения.
- Предотвращение дубликатов. Компонент гарантирует, что дублирующиеся теги не будут добавлены.
- Навигация с клавиатуры. Функция onKeyDown обрабатывает события нажатия клавиш, в частности предотвращая нежелательное поведение при нажатии клавиши Enter.
Разбор кода
Управление состоянием:
- inputValue — отслеживает текст, который пользователь вводит в поле ввода.
- suggestions — массив отфильтрованных возможных значений, которые совпадают с вводом пользователя.
Обработка изменений ввода
- handleInputChange — обновляет значение inputValue на основе ввода пользователя и генерирует предложения, фильтруя possibleValues.
- possibleValues — массив строк, переданный как пропс. Фильтр проверяет, соответствует ли ввод одному из значений в possibleValues (без учета регистра).
Обработка кликов по предложениям
Когда пользователь нажимает на предложение, вызывается функция handleSuggestionClick.
Эта функция добавляет выбранное предложение в теги (управляется родительским компонентом через setTags), если оно еще не было добавлено.
После добавления тега функция очищает предложения и сбрасывает значение inputValue.
Обработка ввода с клавиатуры
onKeyDown обрабатывает события нажатия клавиш, особенно Enter.
При нажатии Enter происходит очистка как поля ввода, так и предложений.
Также вызывается функция handleKeydown, переданная из родительского компонента, для дальнейшей настройки или обработки.
Отображение
Компонент состоит из поля ввода и списка предложений. Поле ввода обновляет значение inputValue и запускает фильтрацию предложений, а список отображает отфильтрованные варианты. Когда есть совпадающие предложения, компонент отображает список опций. Нажатие на вариант добавляет его в теги.
Пропсы:
- possibleValues — массив строк, которые выступают в качестве потенциальных предложений для автозаполнения.
- handleKeydown — функция, переданная из родительского компонента для обработки событий нажатия клавиш.
- setTags — функция, которая обновляет список тегов при выборе предложения.
Нам просто нужно заменить поле ввода на наш кастомный компонент AutoComplete и передать ему все необходимые пропсы.
Добавьте стили в index.css:
Давайте тестить:
Осталась только одна проблема: мы теряем фокус после добавления тега через предложение. Чтобы исправить это, нам нужно передать ref в поле ввода и вручную установить фокус.
Использование ссылок (refs) для доступа к значениям
Определите ref в начале компонента AutoComplete:
Затем передайте его в тег input:
Теперь, в самом конце функций handleSuggestionClick() и onKeyDown() (после выполнения всего кода), добавьте строку:
Заключение:
Этот компонент позволяет пользователям вводить текст и выбирать варианты из отфильтрованных предложений. Он предотвращает дублирование записей, обрабатывает события нажатия клавиш и эффективно управляет внутренним состоянием ввода и предложений.
Вы также можете просмотреть весь код на GitHub Gist: AutoComplete.tsx | TextInput.tsx.
117 открытий2К показов