Как создать асинхронные выпадающие списки с возможностью поиска с помощью React-Select

Введение

HTML предоставляет элемент <select>, который позволяет конечным пользователям выбирать из раскрывающегося меню <option>. Однако могут быть ситуации, когда меню выбора может выиграть от дополнительных тонкостей взаимодействия с пользователем, таких как предоставление пользователю возможности фильтровать доступные варианты.

React Select — это настраиваемая библиотека меню выбора для React с динамическим поиском и фильтрацией. Он также поддерживает асинхронную загрузку параметров, доступность и быстрое время рендеринга.

В этом руководстве вы добавите React Select в проект. Вы также изучите некоторые из доступных дополнительных функций: множественный выбор, параметры, создаваемые пользователем, и асинхронная загрузка параметров.

Предпосылки

Для выполнения этого урока вам понадобится:

Локальная среда разработки для Node.js. Для этого следуйте инструкции по установке Node.js и созданию локальной среды разработки.

Это руководство было проверено с помощью Node v14.7.0, npm v6.14.7, react v16.13.1 и react-select v3.1.0.

Шаг 1 — Настройка проекта

Начните с использования create-react-app для создания приложения React, а затем установите зависимости:

npx create-react-app react-select-example

Перейдите в новый каталог проекта:

cd react-select-example

Теперь вы можете запустить приложение React:

npm start

Исправьте любые ошибки или проблемы с вашим проектом, а затем перейдите на localhost:3000 в веб-браузере.

Когда у вас есть работающее приложение React, вы можете начать добавлять React Select.

Шаг 2 — Добавление React Select

Для вашего проекта потребуется установить библиотеку react-select:

npm install react-select@3.1.0

Примечание. В настоящее время существует проблема с последней версией библиотеки (3.1.0), из-за которой она генерирует предупреждения для устаревшего и устаревшего API при использовании StrictMode. Это известные проблемы, и несколько ожидающих запросов на вытягивание решат некоторые из них.

Вот пример изменения App.js для отображения раскрывающегося меню водных животных:

nano src/App.js

Добавьте массив для aquaticCreatures и используйте компонент Select, предоставленный React Select:

import React from 'react';
import Select from 'react-select';

const aquaticCreatures = [
  { label: 'Shark', value: 'Shark' },
  { label: 'Dolphin', value: 'Dolphin' },
  { label: 'Whale', value: 'Whale' },
  { label: 'Octopus', value: 'Octopus' },
  { label: 'Crab', value: 'Crab' },
  { label: 'Lobster', value: 'Lobster' },
];

function App() {
  return (
    <div className="App">
      <Select
        options={aquaticCreatures}
      />
    </div>
  );
}

export default App;

Вы заметите три вещи:

Вы должны импортировать компонент Select из react-select.
Каждый объект в массиве опций aquaticCreatures должен иметь как минимум два значения: label, строку и value, которые могут быть любыми. тип.
Единственное необходимое свойство — это массив options.

Примечание. Если вы заполняете свой компонент React Select массивом строк, а не повторяете вручную label и value, вы можете использовать метод массива карт JavaScript для подготовки опции массив:

someArrayOfStrings.map(opt => ({ label: opt, value: opt }));

Чтобы зафиксировать, когда пользователь выбирает опцию, добавьте свойство onChange:

<Select
  options={aquaticCreatures}
  onChange={opt => console.log(opt.label, opt.value)}
/>

Значение, передаваемое функции onChange, — это тот же объект, из которого состоит сама опция, поэтому оно будет содержать переменные label и value.

Запустите свой проект:

npm start

Затем откройте localhost:3000 в веб-браузере.

Вам будет представлено меню React Select с aquaticCreatures:

Если вы взаимодействуете с этим меню, вы инициируете событие onChange и записываете сообщения в консоль. Открыв консоль разработчика вашего браузера, вы должны увидеть label и value вашего выбора:

Output'Shark' 'Shark'

Теперь, когда у вас есть работающее меню выбора React, вы можете изучить некоторые другие функции, предоставляемые этой библиотекой.

Шаг 3 — Добавление дополнительных параметров

В дополнение к поиску и выбору React Select предлагает другие функции, такие как множественный выбор, создаваемые пользователем параметры и асинхронная загрузка параметров.

Выбор из нескольких вариантов

HTML <select> поддерживает multiple, что позволяет выбрать несколько <option>.

Точно так же в React Select вы можете включить множественный выбор, добавив свойство isMulti к вашему элементу:

<Select
  options={aquaticCreatures}
  isMulti
/>

В целях исследования свойство onChange также необходимо изменить для поддержки множественного выбора, поскольку opt больше не является отдельным объектом. При множественном выборе он становится вложенным объектом. В противном случае opt.label и opt.value вернули бы undefined.

<Select
  options={aquaticCreatures}
  isMulti
  onChange={opt => console.log(opt)}
/>

Запустите свой проект:

npm start

Затем откройте localhost:3000 в веб-браузере.

Выберите вариант из списка aquaticCreatures, а затем выберите другой. Все ваши множественные выборы должны быть указаны компонентом:

На этом функция множественного выбора заканчивается.

Пользовательские параметры

Вы можете предоставить создаваемые пользователем параметры, чтобы пользователи могли добавлять собственные значения в меню выбора в ситуациях, когда нужный им вариант отсутствует в меню.

Во-первых, вам нужно импортировать компонент Creatable из react-select/creatable:

import Creatable from 'react-select/creatable';

Затем замените компонент Select на Creatable:

<Creatable
  options={aquaticCreatures}
/>

В целях исследования реквизит onChange также необходимо будет изменить, чтобы отобразить значение meta:

<Creatable
  options={aquaticCreatures}
  onChange={(opt, meta) => console.log(opt, meta)}
/>

Запустите проект:

npm start

Когда вы вводите вариант, который в настоящее время не существует, например Cuttlefish, вам будет предложен вариант Создать:

После создания нового пункта меню вы должны увидеть следующее в выводе консоли разработчика вашего браузера:

Output{ label: 'Cuttlefish', value: 'Cuttlefish', __isNew__: true }
{ action: 'create-option' }

Обратите внимание, что у вас есть два способа определить, что событие является новой опцией: переменная __isNew__ выбранной вами опции и значение action meta аргумент в обработчике события.

Также обратите внимание, что label и value будут идентичными строками. Пользователям не предоставляется возможность указать label с другим value, что может повлиять на подход к вашему решению для согласованности в вашем хранилище данных.

На этом функция пользовательских опций заканчивается.

Асинхронная загрузка опций

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

Как и в случае с компонентом Creatable, вам потребуется импортировать AsyncSelect из react-select/async:

import AsyncSelect from 'react-select/async'

Затем замените компонент Select на Async:

<AsyncSelect
  loadOptions={loadOptions}
/>

Чтобы загрузить параметры, передайте функцию loadOptions, аналогичную следующей:

const loadOptions = (inputValue, callback) => {
  // perform a request
  const requestResults = ...

  callback(requestResults)
}

React Select также поддерживает реквизит defaultOptions, который вызывает функцию loadOptions при инициализации для заполнения раскрывающегося списка, и реквизит cacheOptions, который кэширует параметры. в то время как его значение истинно.

На этом функция загрузки асинхронных опций заканчивается.

Заключение

В этом руководстве вы добавили React Select в проект. Настройка и набор функций React Select могут предоставить вашим пользователям более удобный пользовательский интерфейс, чем стандартное меню выбора.

Дополнительную информацию о расширенных функциях можно найти в документации React Select.

Если вы хотите узнать больше о React, загляните на нашу страницу темы React с упражнениями и проектами по программированию.