如何为react-awesome-query-builder添加新类型

Question

const config = {
    ...InitialConfig,
    fields: rules?.data?.fields,
    types: {
      ...InitialConfig.types,
      integer: { ...InitialConfig.types.number },
    },
  };

  const [tree, setTree] = useState(QbUtils.checkTree(QbUtils.loadTree(queryValue), config));

  const onChange = (immutableTree, config) => {
    setTree(immutableTree);
    const jsonTree = QbUtils.getTree(immutableTree);
    console.log(jsonTree);
  };

  const renderBuilder = (props) => (
    <div className={`${classes.root} query-builder-container`}>
      <div className='query-builder qb-lite'>
        <Builder {...props} />
      </div>
    </div>
  );

  return (
    <div>
      <Query {...config} value={tree} onChange={onChange} renderBuilder={renderBuilder} />
    </div>
  );

我有整数类型的字段数据，所以我必须添加新类型整数，但它不能像那样工作，如何添加新类型，如果我控制台配置我看到新类型，但在 onChange 之后它不会添加新规则，它返回空数组*

Answer 1

要向react-awesome-query-builder添加新类型，您需要创建一个与RuleType接口匹配的新组件。该接口定义了规则类型的外观以及它在react-awesome-query-builder中的工作方式。

以下是如何创建新规则类型的示例：

定义将用于显示新规则的新组件

类型

.

import React from 'react';
import { RuleType } from 'react-awesome-query-builder';

interface MyRuleTypeProps {
 onChange: (value: any) => void;
 value: any;
}

class MyRuleType extends React.Component<MyRuleTypeProps> {
render() {
// Here you define what your rule will look like.
 // For example, it can be a text field or a drop-down list.
 return (
 <div>
 <input type="text" value={this.props.value} onChange={e => this.props.onChange(e.target.value)} />
 </div>
 );
 }
}

export default MyRuleType;

创建一个新的 RuleType 实例