javascript - 在next.js中使用react-awesome-query-builder npm包无法添加多个字段如demo所示

Question

我正在尝试使用提供的文档制作与演示相同的查询构建器...在配置中添加更多字段后，我在下拉列表中获得了新选项..并使用多个构建器组件创建更多字段，甚至尝试了不同的配置文件对于他们每个人..但他们都同时改变。如何创建更多字段并为它们提供处理程序

链接到包https://www.npmjs.com/package/react-awesome-query-builder 链接到演示https://ukrbublik.github.io/react-awesome-query-builder/

我在做什么错...如何添加更多部分..这是我的配置文件组件。

import React, {Component} from 'react';
import {Query, Builder, BasicConfig, Utils as QbUtils} from 'react-awesome-query-builder';
//import AntdConfig from 'react-awesome-query-builder/lib/config/antd/index';
//import loadedInitValue from "./init_value";

const InitialConfig = BasicConfig; // or BasicConfig

// You need to provide your own config. See below 'Config format'
let config = {
  ...InitialConfig,
  fields: {
    qty: {
        label: 'Qty',
        type: 'number',
        fieldSettings: {
            min: 0,
        },
        valueSources: ['value'],
        preferWidgets: ['number'],
    },
    price: {
        label: 'Price',
        type: 'number',
        valueSources: ['value'],
        fieldSettings: {
            min: 10,
            max: 100,
        },
        preferWidgets: ['slider', 'rangeslider'],
    },
    color: {
        label: 'Color',
        type: 'select',
        valueSources: ['value'],
        fieldSettings: {
          listValues: [
            { value: 'yellow', title: 'Yellow' },
            { value: 'green', title: 'Green' },
            { value: 'orange', title: 'Orange' }
          ],
        }
    },
    is_promotion: {
        label: 'Promo?',
        type: 'boolean',
        operators: ['equal'],
        valueSources: ['value'],
    },
    }
  },
};

const queryValue = {"id": QbUtils.uuid(), "type": "group"};

class QueryBuilder extends Component {
  state = {
    tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), config),
    config: config
  };
  
  render = () => (
    <div>
      <Query
          {...config} 
          value={this.state.tree}
          onChange={this.onChange}
          renderBuilder={this.renderBuilder}
      />
      {this.renderResult(this.state)}
    </div>
  )  

    renderBuilder = (props) => (
      <div className="query-builder-container" style={{padding: '10px'}}>
        <div className="query-builder qb-lite">
            <Builder {...props} className="my-4" />
            <Builder {...props} className="my-4" />
            <Builder {...props} className="my-4" />
        </div>
      </div>
    )

    renderResult = ({tree: immutableTree, config}) => (
      <div className="query-builder-result">
          <div>Query string: <pre>{JSON.stringify(QbUtils.queryString(immutableTree, config))}</pre></div>
          <div>MongoDb query: <pre>{JSON.stringify(QbUtils.mongodbFormat(immutableTree, config))}</pre></div>
    )
    
    onChange = (immutableTree, config, idx) => {
      // Tip: for better performance you can apply `throttle` - see `examples/demo`
      this.setState({tree: immutableTree, config: config});
      const jsonTree = QbUtils.getTree(immutableTree);
      console.log(jsonTree);
      // `jsonTree` can be saved to backend, and later loaded to `queryValue`
    }
}

export default QueryBuilder;

标签： javascriptreactjsnext.jsquery-builder

Answer 1

将此添加到您的字段配置中

 results: {
            label: "Results",
            type: "!group",
            subfields: {
                product: {
                    type: "select",
                    fieldSettings: {
                        listValues: ["abc", "def", "xyz"],
                    },
                    valueSources: ["value"],
                },
                score: {
                    type: "number",
                    fieldSettings: {
                        min: 0,
                        max: 100,
                    },
                    valueSources: ["value"],
                }
            }
        },