react select

反应选择

React的选择控件。最初用于Keystonejs。

有关现场演示和综合文档，请参见React-select.com。

react-select由ThinkMill和Atlassian资助。我们是一个由社区不断支持的开源项目。

React Select可以帮助您开发功能强大的选择组件，这些组件仅能开箱即用，而不会阻止您自定义对您重要的零件。

对于此组件背后的故事，请在React Conf 2019中观看JED的演讲 - 建筑物React Select

功能包括：

• 具有可自定义功能的数据灵活方法
• 具有情感的可扩展样式API
• 组件注入API完全控制UI行为
• 可控状态道具和模块化体系结构
• 长期要求的功能，例如选项组，门户支持，动画等等

使用旧版本？

• V3，V4和V5升级指南
• V2升级指南
• React Select v1文档和示例可在v1.reeact-select.com上找到。

安装和用法

使用React选择的最简单方法是将其从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将className应用于控件
• classNamePrefix使用给定前缀应用classNames将classnames应用于内部元素
• isDisabled禁用控件
• isMulti允许用户选择多个值
• isSearchable - 允许用户搜索匹配选项
• name - 生成带有此名称的HTML输入，包含当前值
• onChange订阅更改事件
• options - 指定用户可以从中选择的选项
• placeholder - 在未选择选项时更改显示的文本
• noOptionsMessage -（{inputValue：string}）=> string | null-没有选项时要显示的文本
• value - 控制当前值

有关道具反应选择支持的完整文档，请参见道具文档。

可控道具

您可以通过为其提供值来控制以下道具。如果您不这样做，React-Select将为您管理它们。

• value / onChange指定控件的当前值
• menuIsOpen / onMenuOpen / onMenuClose控制菜单是否打开
• inputValue / onInputChange控制搜索输入的值（更改此内容将更新可用选项）

如果您不提供这些道具，则可以设置其控制状态的初始值：

• defaultValue设置控件的初始值
• defaultMenuIsOpen设置菜单的初始开放值
• defaultInputValue设置搜索输入的初始值

方法

反应选择公开了两种公共方法：

• focus() - 以编程方式聚焦控制
• blur() - 编程控制控制

定制

检查文档以获取更多信息：

• 自定义样式
• 使用自定义组件
• 使用内置的动画组件
• 创建异步选择
• 允许用户创建新选项
• 高级用例
• 打字稿指南

打字稿

V5版本代表从JavaScript到打字稿的重写。 V4和更早版本的类型可在@Types上找到。有关如何使用V5开头的类型，请参见TypeScript指南。

谢谢

感谢所有为这个项目做出贡献的人。这是一个疯狂的旅程。

如果您喜欢React Select，则应该在Twitter上关注我！

向乔斯·麦基森（Joss Mackison），查尔斯·李（Charles Lee），本·科诺利（Ben Conolly），汤姆·沃克（Tom Walker），内森·比耶雷玛（Nathan Bierema），埃里克·波诺（Eric Boinow），艾玛·汉密尔顿（Emma Hamilton），戴夫·布罗斯托（Dave Brotherstone），布莱恩·沃恩（Brian Vaughn）和阿特拉斯拉斯设计系统团队大喊大叫，他们与许多其他贡献者一起做到了这一点

执照

麻省理工学院许可。版权（C）Jed Watson 2022。