我正在尝试在 MUI 抽屉内实现 React Syncfusion 查询生成器。在实现此操作时，我面临 IN 运算符的多选复选框的闪烁问题。
如果我在 MUI 抽屉组件之外实现查询构建器组件，它可以正常工作，不会出现任何闪烁。我认为这可能是因为两种弹出窗口（MUI 抽屉和多选下拉菜单）之间的冲突。我需要实现同步融合查询生成器组件的多选复选框下拉列表，而 MUI 抽屉内不会出现任何闪烁。
查询生成器 - 子级
import React, { useState, useEffect } from "react";
import { QueryBuilderComponent } from "@syncfusion/ej2-react-querybuilder";
import { complexData } from "./QueryBuilderJSON";
import { Slider } from "@syncfusion/ej2-react-inputs";
import { getComponent } from "@syncfusion/ej2-base";
import { DropDownList, MultiSelect } from "@syncfusion/ej2-react-dropdowns";
let qryBldrObj;
export default function QueryBuilderComplexDataBinding() {
const [queryJson, setQueryJson] = useState();
let elem;
let dropDownObj;
let multiSelectObj;
let inOperators = ["in", "notin"];
let fieldMode = "DropdownTree";
let separator = ".";
let columns = [
{
field: "Primary",
label: "Primary",
columns: [
{ field: "age", label: "Age", type: "number" },
{
field: "gender",
label: "Gender",
type: "boolean",
values: ["Male", "Female", "Others"],
},
{ field: "profession", label: "Profession", type: "string" },
],
},
{
field: "Amount",
label: "Amount",
columns: [
{
field: "amount",
label: "Amount",
type: "number",
//template to declare it is a range slider
template: {
create: () => {
elem = document.createElement("div");
elem.setAttribute("class", "ticks_slider");
return elem;
},
destroy: (args) => {
getComponent(
document.getElementById(args.elementId),
"slider"
).destroy();
},
write: (args) => {
let slider = new Slider({
value: !args.values ? 0 : args.values,
min: 0,
max: 100,
type: "MinRange",
tooltip: {
isVisible: true,
placement: "Before",
showOn: "Hover",
},
change: (e) => {
if (qryBldrObj) {
qryBldrObj.notifyChange(e.value, args.elements);
}
},
});
slider.appendTo("#" + args.elements.id);
},
},
operators: [
{ key: "Equal", value: "equal" },
{ key: "Not equal", value: "notequal" },
{ key: "Greater than", value: "greaterthan" },
{ key: "Less than", value: "lessthan" },
{ key: "Less than or equal", value: "lessthanorequal" },
{
key: "Greater than or equal",
value: "greaterthanorequal",
},
],
},
],
},
{
field: "PaymentMode",
label: "Payment Mode",
operators: [
{ key: "Equal", value: "equal" },
{ key: "Not Equal", value: "notequal" },
{ key: "In", value: "in" },
{ key: "Not In", value: "notin" },
],
template: {
create: () => {
debugger;
elem = document.createElement("input");
elem.setAttribute("type", "text");
return elem;
},
destroy: (args) => {
debugger;
multiSelectObj = getComponent(
document.getElementById(args.elementId),
"multiselect"
);
if (multiSelectObj) {
multiSelectObj.destroy();
}
dropDownObj = getComponent(
document.getElementById(args.elementId),
"dropdownlist"
);
if (dropDownObj) {
dropDownObj.destroy();
}
},
write: (args) => {
debugger;
const ds = [
"Cash",
"Debit Card",
"Credit Card",
"Net Banking",
"Wallet",
];
//returns the position of the first occurrence of a value in a string.
//The indexOf() method returns -1 if the value is not found
if (inOperators.indexOf(args.operator) > -1) {
multiSelectObj = new MultiSelect({
change: (e) => {
debugger;
if (qryBldrObj) {
qryBldrObj.notifyChange(e.value, e.element);
}
},
dataSource: ds,
mode: "CheckBox",
placeholder: "Select Transaction",
value: args.values,
selectAllText: "Select All",
unSelectAllText: "unSelect All",
showSelectAll: true,
});
multiSelectObj.appendTo("#" + args.elements.id);
} else {
dropDownObj = new DropDownList({
change: (e) => {
if (qryBldrObj) {
qryBldrObj.notifyChange(e.itemData.value, e.element);
}
},
dataSource: ds,
value: args.values ? args.values : ds[0],
});
dropDownObj.appendTo("#" + args.elements.id);
}
},
},
type: "string",
},
];
return (
<QueryBuilderComponent
dataSource={complexData}
columns={columns}
//rule={importRules}
change={fnGetRule}
fieldMode={fieldMode}
separator={separator}
ref={(scope) => {
qryBldrObj = scope;
}}
></QueryBuilderComponent>
);
}
抽屉 - 家长
<Box key="right">
<Drawer anchor="right" open={props.open}>
<div>
<QueryBuilderComplexDataBinding />
</div>
</Drawer>
</Box>
请帮我解决这个问题。预先感谢。