在 React 开发中，单选 / 下拉 / 多选（select）功能使用非常普遍，React select 除了用鼠标点选外，还可以有更多样的功能，比如搜索过滤，树状结构，tab 分组，按组选择等。这些高级功能都可以在第三方组件中找到，本文记录了我自己使用多年最好用的 6 款 React select 多选下拉组件，每一款都经过我实际测试，推荐给大家。

如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。

接下来介绍 6 款我自己常用的 React Select 第三方组件，它们各有特色，希望能帮你找到合适你的选择器

• React Select - 多选下拉菜单王者组件库，覆盖多数应用场景
• React multi select component - 超轻量、零依赖、支持多选
• React Select Search - 支持模糊搜索、键盘快捷键、UI 漂亮
• Tree Select - 树状结构选择器、过滤搜索、分组全选
• Multiselect React Dropdown - 多选搜索、固定选项、分组选项、默认必选
• React Custom Flag Select - 手机号国际区号搜索下拉选择器

1.React Select - 多选下拉菜单王者组件库，覆盖多数应用场景

React Select 可以说是 React 框架下最棒的 Select 多选下拉选择器了，不仅有常规的单选多选，下拉选择功能，还有搜索过滤，多选固定选项，文字带颜色表示，加载禁用提示等。React Select 不仅组件代码简洁优雅，API 也非常友好，只要功能满足你，闭眼选它，不用担心出错

• 单选、多选、标记
• 自定义选项模板
• 过滤及搜索建议
• 基本组件和对自定义组件的支持

扩展阅读：《7 款顶级 React 移动端 ui 组件库推荐测评》

2.React multi select component - 超轻量、零依赖、支持多选

React-multi-select-component 是一款简洁的多选框组件，零依赖，超轻量（<5KB），使用 TypeScript 开发 支持 React 。虽然 UI 简单，但整体轻盈，功能有十分丰富，默认显示复选框，能够对多选项进行分组，支持在一行中显示多个选项，按组全选。

• 轻量级(<5KB)
• 可定制主题
• 使用 TypeScript 开发

扩展阅读：《6款顶级开源 React table 表格组件测评与推荐》

3.React Select Search - 支持模糊搜索、键盘快捷键、UI 漂亮

react-select-search 是一款主打搜索的 React 下拉菜单选择器，轻量级、零依赖，有非常强大的搜索过滤功能，异步选项，可分组，可搜索组名。代码简洁，CSS 样式可定制。

• 轻量级，零依赖
• 基本的 HTML 选择功能，可多选
• 搜索 / 过滤功能
• 支持键盘快捷键
• 可设置带有组名的组选项，可以搜索组名
• 代码简洁，CSS 样式可定制

扩展阅读：《7款亲测好用的 react ui 组件库推荐测评》

4.Tree Select - 树状结构选择器、过滤搜索、分组全选

tree-select 是树状结构选择器，支持多选、分组全选、过滤搜索等。它有三种模式，纯搜索选择，纯树装结构选择以及搜索与树状结合的选择方式。虽然在 React 中树状结构的选择器应用场景不多，但它作为选择器里比较独特的形式，还是想放在这里给大家做参考。

扩展阅读：《6款适合国内场景的 React admin 后台管理框架测评》

5.Multiselect React Dropdown - 多选搜索、固定选项、分组选项、默认必选

multiselect-react-dropdown 正好在最近发布了新版本，它提供多种应用场景的选择方式，可固定选择，限制选择，搜索后选择，默认必选，分组选择等。搜索灵活，不论数据嵌套有多深，加载毫无延迟，点击秒开。CSS 样式可自定义，可高度定制。可使用键盘快捷键。

• 支持服务端渲染（SSR）
• 使用 TypeScript 开发

扩展阅读《React Echarts 使用教程 - 如何在 React 中加入图表》

6. React Custom Flag Select - 手机号国际区号搜索下拉选择器

react-custom-flag-select 很简洁，解决了手机号国际区号选择的需求。这个需求也是所有涉及到手机号注册、设置时网站必有的功能。用户可以在组件里搜索「国家名」或「国际区号」直接搜索定位到所需要的选项上，非常方便。

扩展阅读：《React form 表单验证终极教程》

React 选择器与卡拉云

本文推荐了我自己使用多年的 6 款最好用的 React select 选择器，这其中一定有一款适合你。这些第三方组件已经帮我们节省大量开发时间，如果还想更进一步，推荐使用卡拉云，卡拉云内置选择器和过滤搜索功能，无需懂任何前端，仅需拖拽即可快速生成。

再看个卡拉云的 Demo 案例，下面是用卡拉云搭建的数据库 CURD 后台管理系统，只需拖拽组件，即可在10分钟内完成搭建。

可直接分享给同事一起使用：https://my.kalacloud.com/apps/8z9z3yf9fy/published

卡拉云是新一代低代码开发平台，与 React 这类框架相比，卡拉云无需配置开发环境，直接注册即可开始搭建。开发者无需处理任何前端问题，简单拖拽即可生成图表、表格、表单、富文本等功能组件，一键接入数据库及 API，快速完成企业内部工具搭建，还可以分享给团队成员共享使用，数周的开发时间，缩短至 1 小时。

扩展阅读：