react select

Реагировать на выбор

Выбор элемента управления для React. Первоначально создан для использования в KeystoneJS.

Смотрите React-select.com для живых демонстраций и комплексных документов.

react-select финансируется Thinkmill и Atlassian. Мы являемся проектом с открытым исходным кодом, который постоянно поддерживается сообществом.

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

Для истории, стоящей за этим компонентом, посмотрите разговоры Джеда на React Conf 2019 - Build

Особенности включают:

• Гибкий подход к данным, с настраиваемыми функциями
• Расширяемый API стиля с эмоциями
• API впрыска компонента для полного контроля над поведением пользовательского интерфейса
• Контролируемые реквизиты состояния и модульная архитектура
• Давно заслуженные функции, такие как опционные группы, поддержка портала, анимация и многое другое

Используете более старую версию?

• Руководство по обновлению V3, V4 и V5
• v2 Руководство по обновлению
• React Select V1 Документация и примеры доступны по адресу v1.react-select.com

Установка и использование

Самый простой способ использования React-Select-это установить его из NPM и построить в вашем приложении в WebPack.

 yarn add react-select

Затем используйте его в своем приложении:

 import React , { useState } from 'react' ;
import Select from 'react-select' ;

const options = [
  { value : 'chocolate' , label : 'Chocolate' } ,
  { value : 'strawberry' , label : 'Strawberry' } ,
  { value : 'vanilla' , label : 'Vanilla' } ,
] ;

export default function App ( ) {
  const [ selectedOption , setSelectedOption ] = useState ( null ) ;

  return (
    < div className = "App" >
      < Select
        defaultValue = { selectedOption }
        onChange = { setSelectedOption }
        options = { options }
      / >
    < / div >
  ) ;
} 

Реквизит

Общие реквизиты, которые вы, возможно, захотите указать, включают:

• autoFocus - фокусируйте управление, когда он монтируется
• className - применить имя класса к управлению
• classNamePrefix - Применить имена классов к внутренним элементам с данным префиксом
• isDisabled - отключить управление
• isMulti - разрешить пользователю выбрать несколько значений
• isSearchable - разрешить пользователю искать параметры сопоставления
• name - Сгенерируйте HTML -ввод с этим именем, содержащим текущее значение
• onChange - подписаться на изменения событий
• options - укажите параметры, которые пользователь может выбрать из
• placeholder - измените текст, отображаемый при выборе опции
• noOptionsMessage - ({inputValue: String}) => String | NULL - текст для отображения, когда нет параметров
• value - управлять текущим значением

См. Документацию реквизита для полной документации по поддержке React Select.

Контролируемый реквизит

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

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

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

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

Методы

React-Select выставляет два публичных метода:

• focus() - фокусировать контроль программно
• blur() - размыть управление программно

Настройка

Проверьте документы для получения дополнительной информации о:

• Настройка стилей
• Использование пользовательских компонентов
• Использование встроенных анимированных компонентов
• Создание асинхронного выбора
• Позволяя пользователям создавать новые параметры
• Усовершенствованные варианты использования
• Руководство по типографии

Машинопись

Выпуск V5 представляет собой переписывание от JavaScript в TypeScript. Типы для V4 и более ранние выпуски доступны по адресу @types. См. Руководство по типографии для использования типов, начинающихся с V5.

Спасибо

Спасибо всем, кто внес свой вклад в этот проект. Это была дикая поездка.

Если вам нравится React Select, вы должны следить за мной в Твиттере!

Выкричь Джосса Маккисона, Чарльза Ли, Бена Конолли, Тома Уокера, Натана Биерема, Эрика Боноу, Эммы Гамильтон, Дейва Бертостоуна, Брайана Вона и команды Atlassian Design System, которая вместе со многими другими участниками сделали это возможным ❤

Лицензия

MIT лицензирован. Авторское право (C) Джед Уотсон 2022.