如何使React-QueryBuilder的Contains条件及查询输出不区分大小写？

全局默认开启不区分大小写 #

如果要让所有文本类查询默认不区分大小写，你可以修改默认操作符的配置，给目标操作符添加caseInsensitive: true属性，再传给组件的operators参数：

import { QueryBuilder, defaultOperators } from 'react-querybuilder';

// 遍历默认操作符，给文本相关操作符开启不区分大小写
const caseInsensitiveOps = defaultOperators.map(op => ({
  ...op,
  caseInsensitive: ['equals', 'contains', 'startsWith', 'endsWith'].includes(op.name)
}));

function YourQueryBuilder() {
  return (
    <QueryBuilder
      operators={caseInsensitiveOps}
      fields={[/* 你的字段配置 */]}
      // 其他必要配置
    />
  );
}

这样生成的所有符合条件的查询规则，都会自动带上caseInsensitive: true标识，后端可以据此处理不区分大小写的匹配。

给特定字段单独设置不区分大小写 #

如果只需要某几个字段默认不区分大小写，有两种常用方式：

方式1：针对字段返回专属操作符 #

通过operators参数传入一个函数，根据当前字段返回对应的操作符配置：

import { QueryBuilder, defaultOperators } from 'react-querybuilder';

const fields = [
  { name: 'username', label: '用户名' },
  { name: 'email', label: '邮箱' },
  { name: 'age', label: '年龄', type: 'number' }
];

// 为特定字段生成带不区分大小写配置的操作符
const getFieldOperators = (field) => {
  if (field.name === 'username') {
    return defaultOperators.map(op => ({
      ...op,
      caseInsensitive: ['equals', 'contains'].includes(op.name)
    }));
  }
  // 其他字段沿用默认配置
  return defaultOperators;
};

function YourQueryBuilder() {
  return (
    <QueryBuilder
      fields={fields}
      operators={getFieldOperators}
      // 其他必要配置
    />
  );
}

方式2：在查询变更时自动修正规则 #

通过onQueryChange钩子，递归处理查询结构，给目标字段的规则添加caseInsensitive属性：

import { QueryBuilder } from 'react-querybuilder';

const fields = [/* 你的字段配置 */];

function YourQueryBuilder() {
  const handleQueryChange = (query) => {
    // 递归处理每个规则
    const processRule = (rule) => {
      // 给username字段的指定操作符开启不区分大小写
      if (rule.field === 'username' && ['equals', 'contains'].includes(rule.operator)) {
        return { ...rule, caseInsensitive: true };
      }
      // 处理分组规则
      if (rule.rules) {
        return { ...rule, rules: rule.rules.map(processRule) };
      }
      return rule;
    };
    const updatedQuery = processRule(query);
    // 这里可以把updatedQuery保存到状态或传给后端
  };

  return (
    <QueryBuilder
      fields={fields}
      onQueryChange={handleQueryChange}
      // 其他必要配置
    />
  );
}

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