React Query Builder添加查询规则时如何禁用指定字段选项

要实现仅初始规则保留kind可选、后续新增规则仅显示property和property value字段的效果，可按照以下步骤操作：

• 预定义两套字段配置：
  • 完整初始字段配置：包含kind、property、property value三个选项，仅供给第一条规则使用
  • 简化字段配置：过滤掉kind字段，仅保留property、property value两个选项，供给所有后续新增规则使用
• 给QueryBuilder组件传入getFields回调属性，该回调会接收当前规则的路径作为入参，通过路径判断当前规则是否为初始第一条规则，对应返回不同的字段配置即可。
• 若需要严格限制kind仅能出现一次，可在onQueryChange回调中增加校验逻辑，统计所有规则内字段为kind的数量，超过1次时可回退查询配置或给出业务提示。

示例代码 #

import { useState } from 'react';
import { QueryBuilder } from 'react-querybuilder';
import 'react-querybuilder/dist/query-builder.css';

// 完整字段配置
const allFields = [
  { name: 'kind', label: 'kind' },
  { name: 'property', label: 'property' },
  { name: 'propertyValue', label: 'property value' },
];
// 过滤掉kind的简化字段配置
const limitedFields = allFields.filter(field => field.name !== 'kind');

const QueryBuilderDemo = () => {
  const [query, setQuery] = useState({
    combinator: 'and',
    // 初始默认带第一条kind规则
    rules: [{ field: 'kind', operator: '=', value: '' }],
  });

  const getFields = (rulePath) => {
    // 路径为[0]的即为第一条根规则，返回完整字段
    if (rulePath.length === 1 && rulePath[0] === 0) {
      return allFields;
    }
    // 其他所有规则返回简化字段
    return limitedFields;
  };

  return (
    <QueryBuilder
      fields={allFields}
      getFields={getFields}
      query={query}
      onQueryChange={setQuery}
    />
  );
};

界面效果参考 #

如果业务规则支持嵌套分组，可自行调整getFields内的路径判断逻辑，确保所有非初始根规则都不会出现kind选项即可。

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