头图

本文完整版:《最好用的 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

卡拉云可帮你快速搭建企业内部工具,下图为使用卡拉云搭建的内部广告投放监测系统,无需懂前端,仅需拖拽组件,10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具。

卡拉云企业内部工具

卡拉云是新一代低代码开发平台,与前端框架 Vue、React等相比,卡拉云的优势在于不用首先搭建开发环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。立即免费试用卡拉云

扩展阅读:


蒋川
158 声望14 粉丝