最好用的 5 个 React select 多选下拉菜单组件测评推荐
本文完整版：《最好用的 5 个 React select 多选下拉菜单组件测评推荐》
在 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 选择器，这其中一定有一款适合你。这些第三方组件已经帮我们节省大量开发时间，如果还想更进一步，推荐使用卡拉云，卡拉云内置选择器和过滤搜索功能，无需懂任何前端，仅需拖拽即可快速生成。
卡拉云可帮你快速搭建企业内部工具，下图为使用卡拉云搭建的内部广告投放监测系统，无需懂前端，仅需拖拽组件，10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具。
卡拉云是新一代低代码开发平台，与前端框架 Vue、React 等相比，卡拉云的优势在于不用首先搭建开发环境，直接注册即可开始使用。开发者完全不用处理任何前端问题，只需简单拖拽，即可快速生成所需组件，可一键接入常见数据库及 API，根据引导简单几步打通前后端，数周的开发时间，缩短至 1 小时。立即免费试用卡拉云。
扩展阅读：
版权声明: 本文为 InfoQ 作者【蒋川】的原创文章。
原文链接:【http://xie.infoq.cn/article/ffcd403a4b4246b582d6579ab】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
我的微信：HiJiangChuan 2020.09.08 加入
卡拉云 CMO 卡拉云是一套帮助后端程序员搭建企业内部工具的系统，欢迎试用 www.kalacloud.com
评论