React-Select

React的Select控件。最初为KeystoneJS开发。

查看react-select.com获取在线演示和全面文档。

react-select由Thinkmill和Atlassian资助。 我们是一个持续得到社区支持的开源项目。

React Select帮助您开发强大的选择组件，它们可以开箱即用，同时不妨碍您自定义重要的部分。

了解这个组件背后的故事，请观看Jed在React Conf 2019上的演讲 - 构建React Select

特性包括：

• 灵活的数据处理方法，具有可定制的功能
• 可扩展的样式API，使用emotion
• 组件注入API，完全控制UI行为
• 可控制的状态属性和模块化架构
• 长期请求的功能，如选项分组、门户支持、动画等

使用旧版本？

• 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: '巧克力' },
  { value: 'strawberry', label: '草莓' },
  { value: 'vanilla', label: '香草' },
];

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
• 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() - 以编程方式取消控件焦点

自定义

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

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

TypeScript

v5版本代表了从JavaScript到TypeScript的重写。v4及更早版本的类型可在@types获得。有关如何从v5开始使用这些类型，请参阅TypeScript指南。

鸣谢

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

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

特别感谢Joss Mackison、Charles Lee、Ben Conolly、Tom Walker、Nathan Bierema、Eric Bonow、Emma Hamilton、Dave Brotherstone、Brian Vaughn以及Atlassian设计系统团队，他们与许多其他贡献者一起使这一切成为可能❤️

许可证

MIT许可。版权所有 (c) Jed Watson 2022。