React-Select 教程
🌙
手机阅读
本文目录结构
React-Select
React 的 Select 控件。最初是为在 KeystoneJS 中使用而构建的。
有关实时演示和全面文档，请参见 https://www.react-select.com/
有关如何从 v2 升级到 v3 的详细信息，请参见我们的升级指南。
React Select 由 Thinkmill 和 Atlassian 资助。它代表了一种全新的方式来开发功能强大的 React.js 组件只是工作开箱即用，而被非常定制。
功能
- 具有可定制功能的灵活数据方法
- 带有情感的可扩展样式 API
- 组件注入 API，用于完全控制 UI 行为
- 可控状态道具和模块化架构
- 长期要求的功能，例如选项组，门户支持，动画等
- 如果您对背景感兴趣，请观看 2018 年 3 月在 ReactNYC 上 Jed 关于 React Select 的演讲。
有关如何从 v1 升级到 v2 的详细信息，请参见我们的升级指南。
旧的文档和示例将继续在 v1.react-select.com 上提供。
安装及使用
使用 react-select 的最简单方法是从 npm 安装它，并使用 Webpack 将其构建到您的应用程序中。
yarn add react-select
然后在您的应用中使用它：
道具
您可能要指定的常见道具包括：
- autoFocus - 安装时集中控制
- className - 将 className 应用于控件
- classNamePrefix - 将 classNames 应用于具有给定前缀的内部元素
- isDisabled - 禁用控件
- isMulti - 允许用户选择多个值
- isSearchable - 允许用户搜索匹配选项
- name - 生成具有此名称的 HTML 输入，其中包含当前值
- onChange - 订阅变更事件
- options - 指定用户可以选择的选项
- placeholder - 更改未选择任何选项时显示的文本
- value - 控制当前值
方法
React-select 公开了两个公共方法：
- focus() - 以编程方式集中控制
- blur() - 以编程方式模糊控制
