React Dropdown Select | Создать раскрывающийся список Select в React

Вы можете использовать стороннюю библиотеку, например, response-select или создание собственного компонента раскрывающегося меню в React. Выпадающее меню состоит из четырех основных компонентов:

1. header обертывание
2. заголовок заголовка
3. список , переносящий
4. элементы списка

Что такое раскрывающийся список

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

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

Базовый HTML-код для Выпадающее меню Bootstrap выглядит следующим образом.

 
  Ссылка раскрывающегося списка  
  Действие    Другое действие   Здесь что-то еще  
 

Пример React Select

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

Он имеет следующие особенности.

1. Гибкий подход к данным с настраиваемыми функциями.
2. Расширяемый API стилей с эмоциями.
3. Component Injection API для полного контроля над поведением пользовательского интерфейса.
4. Свойства управляемого состояния и модульная архитектура.
5. Такие давно запрашиваемые функции, как группы параметров, поддержка портала, анимация и многое другое.

Создание элементов select было одним из самых простых способов создания при работе над веб-проектом три или четыре года назад. Теперь очень много нужно сделать для создания элементов select, особенно когда UI/UX имеет высокий приоритет.

Предварительные требования

1. Yarn/npm установлен.
2. Базовое понимание HTML, JavaScript (ES6) и CSS.
3. Базовое понимание React JS и используя приложение для создания реакции.
4. Базовое понимание терминала командной строки.

Шаги по созданию React Dropdown Select

Сначала мы устанавливаем React.js , а затем устанавливаем библиотеку react-select .

Шаг 1. Установите React и другие библиотеки

Введите следующую команду.

 npx create-response-app reaselect 

Теперь перейдите в папку проекта.

 cd reaselect 

Чтобы установить React-Select v2, добавьте пакет response-select , используя следующую команду.

 yarn add response-select # ornpm install response-select --save 

# Пользовательское оформление компонентов реакции

Мы можем добавить красоту и эстетику нашему выбранному компоненту. Перво-наперво, мы будем использовать загрузочный CSS для изменения размера нашего компонента выбора, чтобы он не занимал всю ширину веб-страницы.

Введите следующую команду, установите Bootstrap 4 с помощью следующей команды.

 yarn add bootstrap # ornpm install bootstrap --save  

Установив bootstrap, мы добавим наш стиль к нашему компоненту select.

Шаг 2. Импортируйте модуль response-select.

Внутри файла src >> App.js добавьте следующий код.

//App.jsimport React  from 'react'; import Выбрать из 'response-select'; import 'bootstrap/dist/css/bootstrap.min.css'; const techCompanies = [{label: "Apple", value: 1}, {label: "Facebook  ", value: 2}, {label:" Netflix ", value: 3}, {label:" Tesla ", value: 4}, {label:" Amazon ", value: 5}, {label:" Alphabet ",  value: 6},]; const App = () => (
 
 
 
 
  
 
 
 
 
); экспорт по умолчанию  Приложение 

Здесь мы импортировали bootstrap 4 и react -select .

Затем мы создали массив, содержащий данные, которые должны отображаться в раскрывающемся списке.

После этого мы использовали элемент Select и передали объект options . Доступно множество других свойств, к которым относятся следующие.

1. autofocus — сфокусируйте элемент управления при его монтировании.
2. className — применить className к элементу управления.
3. classNamePrefix — применить classNames к внутренним элементам с заданным префиксом .
4. isDisabled — отключить элемент управления.
5. isMulti — разрешить пользователю выбирать несколько значений.
6. isSearchable — разрешить пользователь для поиска подходящих параметров.
7. name — сгенерировать HTML-ввод с этим именем, содержащий текущее значение.
8. onChange — подписаться на события изменения.
9. options — указать параметры, из которых пользователь может выбирать.
10. заполнитель — изменение текста, отображаемого, когда не выбран ни один параметр.
11. value — контролировать текущее значение.

Вы должны импортировать компонент Select из react-select .

Каждый объект в массиве параметров techCompanies должен иметь как минимум два значения: label , string и value , который может быть любого типа.

Единственное обязательное свойство — это массив options .

Другие возможности

Мы можем использовать множественный select , используя следующее свойство. Нам нужно добавить это свойство.

Управляемые свойства в React

Вы можете управлять следуя реквизитам, предоставляя им значения. Если вы этого не сделаете, response-select будет управлять ими за вас.

• value / onChange — укажите текущее значение элемента управления.
• menuIsOpen / onMenuOpen / onMenuClose — контролировать, открыто ли меню.
• inputValue / onInputChange — контролировать значение ввода поиска (изменяя это обновит доступные параметры).

Если вы не предоставите эти реквизиты, вы можете установить начальное значение состояния, которое они контролируют:

• defaultValue — установить начальное значение элемента управления.
• defaultMenuIsOpen — установить начальное открытое значение меню.
• defaultInputValue — установить начальное значение ввода для поиска.

Методы

React-select предоставляет два общедоступных метода:

• фокус () стро ng> — программно сфокусировать элемент управления.
• blur () — программно размыть элемент управления.

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

В разделе «Стили и состояния» мы обсудили два пользовательских компонента (параметр и элемент управления), которые мы использовали для расширения стиля выбора.

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

В нашем приложении. js, мы импортируем пакеты React и Select из response.js и соответственно response-select следующим образом:

//App.jsimport React, {type ElementConfig} from 'react';  import Select, {components} from 'response-select'; 

Теперь напишите следующий код внутри файла App.js.

//App.jsimport React  , {тип ElementConfig} из "реагировать";  импортировать Select, {компоненты} из 'response-select';  const SingleValue = ({children, ... props}) => ( {children} );  класс App расширяет React.Component {state = {};  состояние = {selectedOption: null,} handleChange = (selectedOption) => {this.setState ({selectedOption});  } render () {return ( ({... base)  , отступ: 5, borderRadius: 5, фон: this.state.selectedOption.value, цвет: 'белый', дисплей: 'flex'})}} components = {{SingleValue}} options = {colourOptions}/>);  }} экспортировать приложение по умолчанию; 

В приведенном выше коде мы определяем наш пользовательский компонент SingleValue как метод, расширяющий базовый компонент в пакете response-select.

В нашем классе App у нас есть несколько свойств и функций, которые вносят вклад в функциональность (как показано на изображении выше), например:

handleChange : этот метод запускается опцией диспетчера состояний, называемой onChange. Этот метод отвечает за сохранение значения выбранной опции в нашем объекте состояния, называемом selectedOption

styles : в этой опоре мы расширяем метод модификатора стиля singleValue, где мы изменяем стили, уже доступные нам по умолчанию, распространяя стили по умолчанию на базовый объект. Строка, отвечающая за добавление цвета фона к каждому выбранному параметру, является background: this.state.selectedOption.value, где мы получаем текущий параметр, выбранный из состояния, и используем его для обновления фона

components : в опоре компонента, которую мы передаем в компонент SingleValue, основная функция компонента заключается в отображении во входных данных для одного выбора.

options : опора options, которую мы все знаем к настоящему моменту, — это то, как мы передаем в наш объект массива выбранные элементы, которые в данном случае имеют такие цвета.

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

Анимированные компоненты React-select

Давайте посмотрим, как мы можем добавить небольшую анимацию в наш компонент React select..

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

//App.jsimport React from 'react'; import Select, {components} from 'response-select'; import makeAnimated from '  response-select/lib/animated '; import' bootstrap/dist/css/bootstrap.css '; const colourOptions = []//наш массив coloursclass App расширяет React.Component {render () {return ();  }} экспортировать приложение по умолчанию; 

Вы можете использовать свойство isMulti, чтобы заставить нас выбрать более одного варианта одновременно.

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

В последней версии React 16. функциональные компоненты стали быстрее.

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

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

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

Изменение свойств родительского компонента из дочернего компонента требует передачи функций от родителя к дочернему в качестве свойств, чтобы вы могли контролировать свойства родительского компонента. state.

В этом примере мы будем использовать компонент «Функциональный компонент» и «Класс».

Если нам просто нужно иметь дело с реквизитами, тогда используйте компонент «Функция» , и если вы хотите иметь дело с состоянием, используйте компонент класса.

Давайте создадим собственный компонент.

Шаг 1: Установите React и Bootstrap 4

Введите следующую команду, чтобы установить React 16.

 npx create-react-app dropdown 

Теперь установите Bootstrap 4.

 yarn add bootstrap 

Шаг 2: Создайте родительский и дочерний компоненты

Следующим шагом является создание папки внутри src folder и наименование папки

Inside компонент s, создайте следующие два файла.

1. DropDown.js (родительский компонент)
2. DropDownContent.js (дочерний компонент)

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

Напишите следующий код внутри файла App.js .

//App.jsimport React from 'react'; import 'bootstrap/dist/css/bootstrap.min.  css '; импортировать' bootstrap/dist/js/bootstrap.bundle.min.js '; импортировать {DropDown} из'./компоненты/DropDown ';  function App () {return (
  
);} экспортировать приложение по умолчанию; 

Из кода видно, что мы импортировали компонент DropDown, который мы только что создали.

Теперь напишите следующий код внутри файла DropDown.js .

 import React,  {Component} из 'response'; импортировать {DropDownContent} из './DropDownContent';export class DropDown расширяет Component {constructor () {super () this.state = {name: [{id: 0, title:' Stranger Things  ', selected: false, key:' name '}, {id: 1, title:' Money Heist ', selected: false, key:' name '}, {id: 2, title:' Рик и Морти ', selected  : false, key: 'name'}, {id: 3, title: 'Ozark', selected: false, key: 'name'}, {id: 4, title: 'Altered Carbon', selected: false, key:  'name'}, {id: 5, title: 'Dark', selected: false, key: 'name'}]}} render () {return (
  
)}} 

В этом коде мы определили данные, которые будут повторяться для создания раскрывающегося списка.

Затем передайте два свойства дочернему компоненту через свойства.

Этот компонент является компонентом класса, потому что мы должны управлять данными через состояние.

Наш DropDownContent.js будет функциональным, потому что он работает только с реквизитами, и нет необходимости использовать состояние, потому что нет состояния, которое нужно поддерживать.

 import React  from 'react'; функция экспорта DropDownContent (props) {return (
  {props  .title}  {
 {props.list.map ((item) => ({item.title} ))} 
} 
)} 

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

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

Сохраните файл и перейдите в браузер.

Вы увидите, что наше раскрывающееся меню реакции работает нормально.

Наконец, пример React Dropdown Select завершен.

См. также

Пример флажка React

Пример React Datepicker

Руководство React Bootstrap Modal