为react-querybuilder添加自定义Add Rule按钮及专属字段运算符

步骤1：扩展组件Props并添加新按钮 #

首先修改AddGroupAction组件的Props接口，新增自定义规则的点击回调，然后在原有按钮旁添加新的按钮：

import { HBButton, HBIcon } from '@hasty-bazar/core'
import { FC } from 'react'
import { useIntl } from 'react-intl'
import queryBuilderMessages from '../HBQueryBuilder.messages'

interface AddRuleActionProps {
  handleOnClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
  // 新增自定义规则点击事件回调
  handleOnCustomRuleClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
}

const AddGroupAction: FC<AddRuleActionProps> = ({ handleOnClick, handleOnCustomRuleClick }) => {
  const { formatMessage } = useIntl()
  return (
    <>
      <HBButton
        onClick={handleOnClick}
        size="small"
        leftIcon={<HBIcon type="plus" />}
        sx={{ marginRight: 2, minWidth: 50 }}
      >
        {formatMessage(queryBuilderMessages.rule)}
      </HBButton>
      {/* 新增自定义规则按钮，用样式区分普通规则 */}
      {handleOnCustomRuleClick && (
        <HBButton
          onClick={handleOnCustomRuleClick}
          size="small"
          leftIcon={<HBIcon type="plus" />}
          sx={{ marginRight: 2, minWidth: 50 }}
          variant="outlined"
        >
          {formatMessage(queryBuilderMessages.customRule) || '添加自定义规则'}
        </HBButton>
      )}
    </>
  )
}

export default AddGroupAction

步骤2：父组件配置自定义规则逻辑 #

在使用QueryBuilder的父组件中，定义自定义字段/运算符集合，实现添加自定义规则的逻辑，并替换组件的控制元素：

import { QueryBuilder, Rule, useQueryBuilder } from 'react-querybuilder';

// 默认字段与运算符
const defaultFields = [
  { name: 'name', label: '商品名称' },
  { name: 'price', label: '商品价格' },
];
const defaultOperators = [
  { name: '=', label: '等于' },
  { name: '>', label: '大于' },
];

// 自定义字段与运算符集合
const customFields = [
  { name: 'customTag', label: '自定义标签' },
  { name: 'customDesc', label: '自定义描述' },
];
const customOperators = [
  { name: 'contains', label: '包含' },
  { name: 'startsWith', label: '开头为' },
];

const MyQueryBuilder = () => {
  const { queryBuilderRef } = useQueryBuilder();

  // 点击自定义按钮时添加带标识的规则
  const handleCustomRuleClick = () => {
    queryBuilderRef.current?.addRule({
      type: 'custom', // 标记为自定义规则，用于后续区分渲染
      field: customFields[0].name,
      operator: customOperators[0].name,
      value: '',
    });
  };

  return (
    <QueryBuilder
      fields={defaultFields}
      operators={defaultOperators}
      controlElements={{
        // 替换添加规则的组件，传入自定义点击回调
        addRuleAction: (props) => (
          <AddGroupAction
            handleOnClick={props.handleOnClick}
            handleOnCustomRuleClick={handleCustomRuleClick}
          />
        ),
        // 根据规则类型渲染对应的字段/运算符
        rule: (props) => {
          if (props.rule.type === 'custom') {
            return (
              <Rule
                {...props}
                fields={customFields}
                operators={customOperators}
              />
            );
          }
          return <Rule {...props} />;
        },
      }}
    />
  );
};

export default MyQueryBuilder;

步骤3：补充国际化文案（可选） #

如果使用国际化，在queryBuilderMessages中添加对应文案：

// HBQueryBuilder.messages.json
{
  "rule": "添加规则",
  "customRule": "添加自定义规则"
}

这样就完成了需求：原有按钮保持默认逻辑，新按钮点击后会添加使用自定义字段和运算符集合的规则。

内容的提问来源于stack exchange，提问作者theGhostN