我们如何在react-awesome query-builder中显示之前输入的搜索条件？

Question

我正在使用react- and query -builder来构建查询和搜索。当我再次登录到应用程序时，我希望在同一搜索中显示以前输入的查询。我指的是一些默认选择的条件。我在谷歌上搜索了一种实现方式，但不幸的是，我没有得到任何想法。下面是代码

class QueryProcessor extends Component{
constructor(props){
super(props);
this.state={
  query:null,
}

 this.getChildren=this.getChildren.bind(this);
 let query=null;
 let mainDate=null;

}


getChildren(props) {


 this.query=QbUtils.queryString(props.tree, props.config);
    return (

        <div>
            <div className="query-builder">
                <Builder {...props} />
            </div>


        </div>
    )

}

onChange(tree) {
  //here you can save tree object:
//  var treeJSON = transit.toJSON(tree);
 console.log("tree",tree);

}
 render(){
 let mainData=this.props.rulingList?this.props.rulingList:null;
  console.log("mainData",mainData);



    return(
    <div className="page-content container-fluid header-master">
      <div className="content content-background">
         <div className="col-md-12 custom-back-white header-master">
         <br/>
           <div className="">
           <h1> Query Builder</h1><br/>
           <Query
           {...config}
           //you can pass object here, see treeJSON at onChange
          // value=transit.fromJSON(treeJSON)
           get_children={this.getChildren}
           onChange={this.onChange}

         ></Query><br/>
         <div className="pull-right">
            <button type="button" className="btn btn-success" onClick={()=>{this.props.ListByQuery(this.query)}}   >Search</button>
         </div>


          <br/>

      </div>

         </div>

    </div>
    </div>

  );
 }
}

你能帮我实现吗。提前感谢

Answer 1

在这里的演示中，我们展示了两种序列化和加载树https://github.com/ukrbublik/react-awesome-query-builder/blob/master/examples/demo/demo.js#L18的方法

我尝试了使用transit-immutable-js的第二种方法

serializeTree = transit.toJSON;
loadTree = transit.fromJSON;

下面是一个Formik字段组件，您可以像这样使用它

<Field
name="condition"
component={QueryBuilder}
fields={fields}
label="Conditions"
/>

组件：

/* eslint-disable jsx-a11y/label-has-for */

import React from 'react';
import PropTypes from 'prop-types';
import get from 'lodash.get';
import { Query, Builder, Utils as QbUtils } from 'react-awesome-query-builder';
import transit from 'transit-immutable-js';
import 'react-awesome-query-builder/css/styles.scss';
import 'react-awesome-query-builder/css/compact_styles.scss';
import { Form } from 'react-bootstrap';
import config from './config';

const QueryBuilder = ({
  field,
  form: { touched, errors, setFieldValue },
  type,
  id,
  label,
  className,
  fields,
  ...props
}) => {
  const getChildren = queryProps => {
    return (
      <div className="query-builder">
        <Builder {...queryProps} />
      </div>
    );
  };
  return (
    <Form.Group className={className} controlId={field.name}>
      {label && <Form.Label>{label}</Form.Label>}
      <Form.Control
        as={Query}
        get_children={getChildren}
        isInvalid={get(touched, field.name) && get(errors, field.name)}
        onChange={tree => {
          setFieldValue(field.name, {
            tree: transit.toJSON(tree),
            mongo: JSON.stringify(
              QbUtils.mongodbFormat(tree, { ...config, fields })
            )
          });
        }}
        fields={fields}
        {...config}
        {...props}
        value={field.value ? transit.fromJSON(field.value.tree) : null}
      />
      <Form.Control.Feedback type="invalid">
        {get(errors, field.name)}
      </Form.Control.Feedback>
    </Form.Group>
  );
};

QueryBuilder.propTypes = {
  field: PropTypes.object.isRequired,
  form: PropTypes.object.isRequired,
  fields: PropTypes.object.isRequired,
  type: PropTypes.string,
  className: PropTypes.string,
  id: PropTypes.string.isRequired,
  error: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

QueryBuilder.defaultProps = {
  type: 'input',
  className: '',
  value: null,
  label: null,
  error: null
};

export default QueryBuilder;

示例配置文件：https://github.com/ukrbublik/react-awesome-query-builder#config-format

Answer 2

我不再使用传输来重新评论了。在最新的版本中，我已经添加了工具来将树保存到json并从json加载：

• loadTree
• getTree

查看新示例