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
- 为控件应用classNameclassNamePrefix
- 为内部元素应用带有给定前缀的classNamesisDisabled
- 禁用控件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
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。