Оживите свои скучные раскрывающиеся списки с помощью этой гибкой библиотеки React.

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

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

Установка React Select

Интеграция React с другими библиотеками или технологиями, такие как React Select, React Redux и многие другие, могут упростить процесс разработки.

Чтобы начать работу с React Select, вам необходимо установить его в свой проект. К сделайте это с помощью npm, запустите эту команду терминала в каталоге вашего проекта:

npm i --save react-select

При этом библиотека будет установлена ​​и настроена в вашем проекте React, и вы сможете начать ее использовать.

Создание входных данных выбора с помощью React Select

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

instagram viewer
Выбирать компонент. Это легко настраиваемый компонент, который позволяет пользователям выбирать параметры из списка.

Вот пример использования компонента Select:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


return (





 </div>
 )
}
exportdefault App

Этот пример начинается с импорта Выбирать компонент из «реакция-выбор”. Он определяет параметры массив с тремя объектами, каждый из которых имеет ценить и этикетка свойство. Свойство value представляет значение, которое форма отправит на серверную часть при ее отправке. Свойство label — это текст, который компонент Select будет отображать в раскрывающемся списке.

Когда вы визуализируете компонент Select, передайте ему массив параметров, используя метод параметры реквизит.

С помощью этого блока кода библиотека React Select создаст раскрывающийся список, подобный этому:

Настройка выбранных входов

React Select предоставляет различные способы настройки выбранных входных данных. Вы можете использовать классы CSS или применять встроенные стили непосредственно к выбранным входным данным в соответствии с вашими предпочтениями.

Настройка с помощью классов CSS

Библиотека React Select предоставляет имя класса опора для Выбирать компонент. Используйте эту опору className применить пользовательскую таблицу каскадных стилей (CSS) стили к вашим компонентам Select.

Например:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


return (






exportdefault App

Приведенный выше блок кода похож на предыдущий, но в нем используется имя класса prop, чтобы применить пользовательский класс CSS к Выбирать компонент. Укажите имя в свойстве className, и вы сможете использовать его для применения стилей CSS к компоненту:

.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}

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

Настройка с помощью встроенных стилей

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

Вот пример:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


const customStyles = {
 control: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#e2e2e2",
 }),
 option: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: state.isFocused? "#e2e2e2": "",
 color: state.isFocused? "#333333": "#FFFFFF",
 }),
 menu: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#333333",
 }),
 }


return (





 </div>
 )
}
exportdefault App

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

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

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

Добавление функциональности к выбранным входам

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

Функция множественного выбора

Чтобы включить функцию множественного выбора в раскрывающихся списках, передайте isMulti prop для компонента Select. Это позволяет пользователям выбирать несколько вариантов из раскрывающегося меню.

Например:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 { value: "grapes", label: "Grapes" },
 { value: "orange", label: "Orange" },
 ]


return (





 </div>
 )
}
exportdefault App

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

Функциональность поиска

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

Чтобы включить функцию поиска, передайте доступен для поиска опора на Выбирать компонент. Как isMulti prop, isSearchable принимает логическое значение.

Вот пример использования свойства isSearchable для включения функции поиска:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "apricot", label: "Apricot" },
 { value: "mango", label: "Mango" },
 { value: "mangosteens", label: "Mangosteens" },
 { value: "avocado", label: "Avocado" },
 ]


return (





 </div>
 )
}
exportdefault App

При рендеринге приведенного выше блока кода отобразится поле выбора с функцией поиска. Он будет выглядеть и функционировать следующим образом:

Создание пользовательских компонентов раскрывающегося списка

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

Например:

import React from"react"
import Select, { components } from"react-select"
functionApp() {
const CustomOption = (obj) => (




{obj.label}</span>
marginInlineStart: "0.2rem" }}>Fruit</span>
 </div>
 )



const CustomDropdownIndicator = (props) => (

↓</span>
 </components.DropdownIndicator>
 )


const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


const customComponents = {
 Option: CustomOption,
 DropdownIndicator: CustomDropdownIndicator,
 }


return<Selectoptions={options}components={customComponents} />
}
exportdefault App

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

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

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

Наконец, этот код передает объект customComponents в свойство компонентов компонента Select. Это отобразит ввод выбора с пользовательскими компонентами, который будет выглядеть следующим образом:

Стандартные компоненты могут быть более мощными и привлекательными

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