简介
React-Material-QueryBuilder 是一个 React 组件库，提供了一种用于构建搜索/筛选功能的交互式 UI。它可以构建一个可扩展的表单，用于构建复杂的查询表达式。本篇文章将介绍该 npm 包的使用教程。
安装与引入
在项目中使用 React-Material-QueryBuilder，我们需要先安装它。可以使用 npm 或者 yarn 来安装：
$ npm install react-material-querybuilder
$ yarn add react-material-querybuilder
然后在需要使用的地方引入：
import React, { Component } from 'react';
import MaterialQueryBuilder from 'react-material-querybuilder';如何使用
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