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

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年05月31日

最好用的 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 表单验证终极教程

React 选择器与卡拉云

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

kalacloud-secelect

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

卡拉云 SQL admin 后台管理系统

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

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

扩展阅读: