npm 包 react-material-querybuilder 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

简介

React-Material-QueryBuilder 是一个 React 组件库，提供了一种用于构建搜索/筛选功能的交互式 UI。它可以构建一个可扩展的表单，用于构建复杂的查询表达式。本篇文章将介绍该 npm 包的使用教程。

安装与引入

在项目中使用 React-Material-QueryBuilder，我们需要先安装它。可以使用 npm 或者 yarn 来安装：

- --- ------- ---------------------------
- ---- --- ---------------------------

然后在需要使用的地方引入：

------ ------ - --------- - ---- --------
------ -------------------- ---- ------------------------------

如何使用

React-Material-QueryBuilder 组件库提供了一个基于 Material UI 的 QueryBuilder 组件，可以轻松地在项目中使用。以下是使用教程。

基本用法

最简单的使用方式，只需要提供一个 fields 属性，表示用于查询的字段信息。其中每一项字段信息包含以下属性：

  • name：字段名称，类型为字符串。
  • label：字段展示名称，类型为字符串。
  • inputType：字段的输入类型，例如 text、number、date 等等。
  • operators：该字段支持的操作符。
----- ------ - --
  ----- ------------
  ------ ------ ------
  ---------- -------
  ---------- --------- ------------
-- -
  ----- -----------
  ------ ----- ------
  ---------- -------
  ---------- --------- ------------
---

----- ----------- ------- --------- -

  ----- - -
    ------ --
  --

  ------------ - ------- -- -
    --------------- ----- ---
  -

  -------- -
    ------ -
      ---------------------
        ---------------
        ----------------------------
      --
    --
  -
-

上述代码中，我们首先定义了查询用到的字段信息，然后在组件中使用时，将 fields 属性设置为该信息数组，并设置一个 onChange 属性监听组件变化。

高级用法

在实际项目中，我们的查询条件可能需要更加复杂，需要添加自定义的操作符、设置默认值、设置样式等等。下面我们将逐一介绍这些高级用法。

自定义操作符

在默认情况下，React-Material-QueryBuilder 只提供了一些基础的操作符，例如 equal、not_equal、in、not_in 等等。如果项目需要自定义操作符，可以通过以下方式实现：

----- ------ - --
  ----- ------------
  ------ ------ ------
  ---------- -------
  ---------- --------- ------------ -
    ------ ------- ----------
    ----- ------------------
    ---------- -------
    ------------ -
  --
---

----- ----------- ------- --------- -

  ----- - -
    ------ --
  --

  ----------------------- - -------------- --------- ------ ------ -- -
    ----- ------------ - ------------------------------------- --------- -------
    ------ ----------- --- -- -- ------------------------ --- ---------
  -

  ------------ - ------- -- -
    --------------- ----- ---
  -

  -------- -
    ------ -
      ---------------------
        ---------------
        -------------- ---------------- ---------------------------- --
        ----------------------------
      --
    --
  -
-

上述代码中，我们在 fields 数组中添加了一个自定义操作符，名为 custom_operator，并设置了操作符需要的输入类型和基数等信息。同时，我们在组件中使用时，传入了一个 customRules 属性，该属性用于自定义操作符的验证规则。

在上述代码中，我们使用 this.customOperatorValidator 方法来验证自定义操作符 custom_operator。该方法接收四个参数：

  • currentQuery：当前查询对象。
  • operator：当前操作符。
  • index：在查询对象中的索引。
  • field：当前字段。

方法返回一个 bool 值，用于验证该操作符的值是否正确。

设置默认值

在某些情况下，我们需要设置某些字段的默认查询条件。例如，查询的开始时间和结束时间可以设置默认值，这样用户就可以直接使用默认时间进行查询。React-Material-QueryBuilder 组件提供了 defaultRules 属性，可以用于设置默认值。

----- ------ - --
  ----- ------------
  ------ ------ ------
  ---------- -------
  ---------- --------- ------------
-- -
  ----- -----------
  ------ ----- ------
  ---------- -------
  ---------- --------- ------------
-- -
  ----- ------------
  ------ -------- ----
  ---------- -------
  ---------- --------- ---------
---

----- ----------- ------- --------- -

  ----- - -
    ------ --
  --

  ------------ - ------- -- -
    --------------- ----- ---
  -

  -------- -
    ------ -
      ---------------------
        ---------------
        ---------------
          ---------- -
            --------- --------
            ------ ------
          --
          ---------- -
            --------- --------
            ------ ------------
          -
        --
        ----------------------------
      --
    --
  -
-

上述代码中，我们在 defaultRules 属性中设置了 firstName 和 createdAt 字段的默认值。

设置样式

最后，我们可以为 React-Material-QueryBuilder 组件添加样式，并自定义其外观。与其他 React 组件类似，我们需要为其添加 className 或 style 属性来实现样式的自定义。

----- ------ - --
  ----- ------------
  ------ ------ ------
  ---------- -------
  ---------- --------- ------------
---

----- ----------- ------- --------- -

  ----- - -
    ------ --
  --

  ------------ - ------- -- -
    --------------- ----- ---
  -

  -------- -
    ------ -
      ---- -------------------------------------
        ---------------------
          ---------------
          ---------------
            ---------- -
              --------- --------
              ------ ------
            -
          --
          ----------------------------
        --
      ------
    --
  -
-

上述代码中，我们在 div 标签中添加了 my-material-querybuilder 的自定义类名，然后使用该类名重写 React-Material-QueryBuilder 的样式。

总结

到这里，我们对 React-Material-QueryBuilder 的使用教程就介绍完了。只是其中的一些基础用法，该 npm 包还提供了其他一些高级用法，可以根据自己的需求查看文档。希望本篇文章能够对大家有帮助，谢谢阅读！

示例代码

------ ------ - --------- - ---- --------
------ -------------------- ---- ------------------------------

----- ------ - --
  ----- ------------
  ------ ------ ------
  ---------- -------
  ---------- --------- ------------
-- -
  ----- -----------
  ------ ----- ------
  ---------- -------
  ---------- --------- ------------
---

----- ----------- ------- --------- -

  ----- - -
    ------ --
  --

  ------------ - ------- -- -
    --------------- ----- ---
  -

  -------- -
    ------ -
      ---------------------
        ---------------
        ----------------------------
      --
    --
  -
-

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562e681e8991b448e0875

阅读全文

猜你喜欢

  • npm 包 jenkins-build-status-notifier 使用教程

    介绍 在前端开发中，我们通常需要与后端开发团队进行协作，他们可能使用 Jenkins 等 CI/CD 工具来实现自动化构建和部署。为了方便前端开发团队了解构建状态，我们可以使用 jenkins-bui...

    3 年前
  • npm 包 ts-init 使用教程

    前言 在前端开发中，使用 TypeScript 语言进行开发已经成为一种趋势，但是对于初次接触 TypeScript 的小伙伴，有些繁琐的配置可能会让他们望而却步。

    3 年前
  • npm 包 load-sample-set 使用教程

    在前端开发中，我们经常需要加载一些样本数据来进行开发调试或者用于展示。最近，我发现了一个非常方便的 npm 包 load-sample-set，它可以快速地帮助我们加载一些样本数据集合，提高我们的开发...

    3 年前
  • npm包mongoose-express-crud使用教程

    前言 Mongoose-express-crud是一款针对Mongoose和Express应用程序的npm包，它可以快速生成RESTful API并提供用于对模型的高级操作的基础控制器。

    3 年前
  • npm 包 @unclepaul/allcountjs 使用教程

    介绍 @unclepaul/allcountjs 是一个基于 AngularJS 的快速开发框架，用于快速构建企业级应用程序。它提供了一系列的组件和插件，使得开发者可以快速地构建出完整的 Web 应用...

    3 年前
  • npm 包 heroku-tarball-deploy 使用教程

    介绍 在前端开发过程中，有时需要将应用程序部署到云服务上以供用户使用。Heroku 是一种流行的云服务，可以让开发者轻松地将应用程序部署到云端。npm 包 heroku-tarball-deploy ...

    3 年前
  • npm 包 osearch 使用教程

    在前端开发过程中，我们经常需要对数据进行搜索以及过滤，而 osearch 就是一个非常优秀的 npm 包，可以帮助我们完成这些工作，本篇文章将介绍 osearch 的基础用法及高级使用技巧。

    3 年前
  • npm 包 pino-redis 使用教程

    介绍 pino-redis 是一个基于 Redis 存储的 JavaScript 日志记录器，适用于前端项目。它旨在提供快速、可靠且易于集成的日志解决方案，同时防止丢失日志，并提供对其的简单访问。

    3 年前
  • npm 包 pyjsx 使用教程

    在现代 Web 开发中，前端框架越来越多，而 React 作为最流行的前端框架之一，拥有强大的生态系统和庞大的开发者社区。而 pyjsx 就是 React 开发中的一个非常有用的工具。

    3 年前
  • npm包@blackpixel/framer-navbarcomponent使用教程

    简介 @blackpixel/framer-navbarcomponent是一个基于React框架的导航栏组件库，在制作Web和移动端应用时可以使用该组件库来加速开发。

    3 年前
  • npm 包 @jeffhandley/capture-proxy 使用教程

    本篇教程将介绍如何使用 npm 包 @jeffhandley/capture-proxy，以实现对网络请求的捕获和代理，方便进行前端调试和测试。 1. 什么是 @jeffhandley/captur...

    3 年前
  • npm 包 jm-bank 使用教程

    什么是 jm-bank？ jm-bank 是一个基于 JavaScript 的 npm 包，该包的主要功能是提供支持中国大陆地区大部分银行的网银在线支付的工具库。该库封装了一些通用的支付接口，同时也提...

    3 年前
  • npm 包 graphql-factory-acl 使用教程

    在前端开发中，权限控制是一个很重要的方面。在使用 GraphQL 进行数据交互时，更需要高效、灵活的权限控制机制。而 npm 包 graphql-factory-acl 就是为了解决这个问题而生的神器...

    3 年前
  • Npm包Mock20使用教程

    在前端开发中，mock数据是必不可少的一环。这不仅能够帮助我们更高效的开发测试，而且还可以防止因为测试数据误导而出现的系统问题。npm包mock20在提供mock数据的同时，还能够支持一些复杂的语法，...

    3 年前
  • npm 包 salt-hash-pkg 使用教程

    前言 在前端开发中，如何保护用户的密码是一个重要的安全问题。我们不能简单地将密码存储在数据库中，而需要进行加密处理。本文将介绍一款 npm 包 salt-hash-pkg，它可以帮助我们轻松地进行密码...

    3 年前
  • npm包summernote-bricks使用教程

    前言 summernote-bricks是一个基于summernote富文本编辑器的拓展包，它提供了一些易于使用的工具和组件，帮助开发者更方便地集成富文本编辑器到自己的Web应用程序中。

    3 年前
  • npm 包 wilson-interval-func 使用教程

    在前端开发中，经常需要使用定时器来完成某些任务或者是在某些条件下触发某些操作。其中，定时器使用的频率和时长不同，需要选择不同的类型和配置进行处理。wilson-interval-func 是一个可以帮...

    3 年前
  • npm 包 cordova-plugin-app-launcher 使用教程

    近年来，移动应用已成为人们生活和工作中不可或缺的一部分。而在开发一个完整的移动应用时，引用第三方的 Cordova 插件可以帮助我们更快地实现我们想要的功能。其中，cordova-plugin-app...

    3 年前
  • npm 包 tap-strings 使用教程

    在前端开发中，测试是非常重要的一部分。而且，对于大型项目来说，测试更是不可或缺的一环。在 Node.js 环境中，有很多测试框架可供选择，其中就包括 tap。tap 确实是一个不错的测试框架，但是它的...

    3 年前
  • npm 包 react-ckeditor-wrapper 使用教程

    在前端开发中，我们经常使用富文本编辑器来添加富文本内容。而使用富文本编辑器产生的问题在于，它们通常是由 JavaScript 编写，这意味着开发人员必须花费大量的时间和精力来实现它们。

    3 年前

相关推荐

    暂无文章