最好用的 5 个 React select 多选下拉菜单组件测评推荐

最好用的 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 - 多选下拉菜单王者组件库，覆盖多数应用场景

1React Select

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

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

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

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

2React multi select component

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

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

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

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

3react-select-search

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

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

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

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

4tree-select

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

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

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

5multiselect-react-dropdown

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

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

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

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

6react-custom-flag-select

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

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