验证器在react-querybuilder中不起作用

Question

我正在使用react-querybuilder。字段验证不起作用。 当您单击规则并检查所有字段时，请参阅此StackBlitz，没有错误。

export const fields = (
    {
      name: 'lastName',
      label: 'Last Name',
      placeholder: 'Enter last name',
      validator: (r: RuleType) => !!r.value,
    },
    {
      name: 'view',
      label: 'Unique views',
      inputType: 'number',
      operators: [
        { name: '=', label: '=' },
        { name: '<', label: 'less than' },
        { name: '>', label: 'more than' },
        { name: 'between', label: 'in between' },
      ],
      validator: (r: RuleType) => r.value > 0,
    },
  ] satisfies Field[]
).map(toFullOption);

这是我的 QueryBuilder 组件

import 'react-querybuilder/dist/query-builder.scss'
import './styles.scss'

import { QueryBuilderAntD } from '@react-querybuilder/antd'
import { useState } from 'react'
import type { RuleGroupType } from 'react-querybuilder'
import { QueryBuilder, defaultValidator, formatQuery } from 'react-querybuilder'

import { fields } from './fields'

const initialQuery: RuleGroupType = { combinator: 'and', rules: [] };

export const SegmentGroupQueryBuilder = () => {
  const [query, setQuery] = useState(initialQuery);

  
  console.log(query)
  return (
    <>
    <QueryBuilderAntD>
      <QueryBuilder
        fields={fields}
        query={query}
        onQueryChange={setQuery}
        validator={defaultValidator}
        controlClassnames={{ queryBuilder: 'queryBuilder-branches' }}
      />
    </QueryBuilderAntD>
    <pre>{formatQuery(query, {
            format: 'sql'
          })
    }</pre>
  </>
  );
  
}

我使用的是 antd/querybuilder 包：7.2.0。然而，它正在工作here不知道是什么问题。我也在不同的项目中尝试过。可能的问题是什么？它没有在 UI 或颜色上显示任何错误，甚至渲染的输入 html 也没有文档中提到的无效错误类。

Answer 1

这里是

react-querybuilder

的维护者。您的代码似乎有效，但如果没有基于

queryBuilder-invalid

类的样式，您将看不到任何视觉证据。

我已将您的 stackblitz 代码复制到 此 CodeSandbox 并应用了以下 CSS：

.queryBuilder-invalid {
  border: 2px solid red;
}

如下所示的初始查询，演示了各个字段的有效/无效状态，无效状态以红色框出。

const initialQuery: RuleGroupType = {
  combinator: 'and',
  rules: [
    { field: 'firstName', operator: 'beginsWith', value: 'Stev' },
    { field: 'firstName', operator: '=', value: '' },
    { combinator: 'and', rules: [] },
    {
      field: 'uniqueArticleViews',
      operator: '=',
      valueSource: 'value',
      value: 3,
    },
    {
      field: 'uniqueArticleViews',
      operator: '=',
      valueSource: 'value',
      value: 0,
    },
    {
      field: 'alsoPlays',
      operator: 'in',
      valueSource: 'value',
      value: 'ZB,TH',
    },
    { field: 'alsoPlays', operator: 'in', valueSource: 'value', value: '' },
  ],
};

queryBuilder-invalid

类已根据

defaultValidator

的逻辑添加到空组中。无效规则基于各自字段的验证器。