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() - 以编程方式模糊控制

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

书籍推荐