SyncFusion：如何将附加的 MultiSelectComponent 字段添加到默认编辑器窗口

Question

我正在致力于将 Syncfusion 中的 MultiSelectComponent 集成到 ScheduleComponent 编辑器窗口中。但是，我在点击输入字段时遇到错误。

Uncaught TypeError: Cannot read properties of undefined (reading 'enqueueForceUpdate')
    at Component.forceUpdate (react.development.js:368:16)
    at ComponentBase.renderReactTemplates (component-base.js:473:18)
    at Observer.eval (multi-select.js:281:23)
    at Observer.notify (observer.js:92:32)
    at ComponentBase.trigger (component-base.js:266:36)
    at MultiSelect.onPopupShown (multi-select.js:268:14)
    at Observer.eval (multi-select.js:5122:23)
    at Observer.notify (observer.js:92:32)
    at ComponentBase.trigger (component-base.js:266:36)
    at MultiSelect.showPopup (multi-select.js:5102:14)
    at MultiSelect.wrapperClick (multi-select.js:1099:22)

这是我组件的相关部分：

"use client";

import * as React from "react";
import {
  ScheduleComponent,
  ViewsDirective,
  ViewDirective,
  Week,
  Month,
  Inject,
} from "@syncfusion/ej2-react-schedule";
import { MultiSelectComponent } from "@syncfusion/ej2-react-dropdowns";
import { createElement } from "@syncfusion/ej2-base";

const Calendar = () => {
  const [eventData, setEventData] = React.useState([]);

  const onPopupOpen = (args) => {
    if (args.type === "Editor") {
      if (!args.element.querySelector(".custom-field-row")) {
        let row = createElement("div", { className: "custom-field-row" });
        let formElement = args.element.querySelector(".e-schedule-form");
        formElement.firstChild.insertBefore(
          row,
          formElement.firstChild.firstChild
        );

        let container = createElement("div", {
          className: "custom-field-container",
        });
        let inputEle = createElement("input", {
          className: "e-field",
          attrs: { name: "Members" },
        });
        container.appendChild(inputEle);
        row.appendChild(container);

        new MultiSelectComponent({
          dataSource: [
            {
              id: 1,
              text: "John Doe",
              email: "[email protected]",
            },
            {
              id: 2,
              text: "Jane Smith",
              email: "[email protected]",
            },
            {
              id: 3,
              text: "Alice Johnson",
              email: "[email protected]",
            },
          ],
          fields: { text: "text", value: "id" },
          placeholder: "Select Members",
          mode: "Box",
          showDropDownIcon: true,
          allowFiltering: true,
        }).appendTo(inputEle);
      }
    }
  };

  const onActionBegin = (args) => {
    if (args.requestType === "eventCreate") {
      console.log("New appointment created:", args.data);
      setEventData([...eventData, ...args.data]);
    }
    if (args.requestType === "eventChange") {
      console.log("Appointment updated:", args.data);
      setEventData(
        eventData.map((event) =>
          event.Id === args.data.Id ? args.data : event
        )
      );
    }
    if (args.requestType === "eventRemove") {
      console.log("Appointment removed:", args.data);
      setEventData(eventData.filter((event) => event.Id !== args.data[0].Id));
    }
  };

  return (
    <div className="mt-10">
      <ScheduleComponent
        height="800px"
        eventSettings={{
          dataSource: eventData,
          allowMultiDrag: false,
        }}
        actionBegin={onActionBegin}
        popupOpen={onPopupOpen}
        allowMultiRowSelection={false}
        allowMultiCellSelection={false}
      >
        <ViewsDirective>
          <ViewDirective option="Week" />
          <ViewDirective option="Month" />
        </ViewsDirective>
        <Inject services={[Week, Month]} />
      </ScheduleComponent>
    </div>
  );
};

export default Calendar;

我尝试过的事情

• 确保 MultiSelectComponent 初始化发生在 onPopupOpen 函数内。
• 仔细检查依赖项及其版本。
• 尝试以不同方式初始化 MultiSelectComponent（例如，使用 useRef）。

问题

尽管进行了这些尝试，我仍然遇到与 enqueueForceUpdate 相关的相同 TypeError。

测试问题的链接 https://stackblitz.com/edit/syncfusion-multi-select-issue-2-vreevz?file=index.js

注意：使用简单的下拉列表组件看起来不错

https://stackblitz.com/edit/syncfusion-multi-select-issue-2-fdbvcc?file=index.js

任何有关可能出现问题的帮助或见解将不胜感激！

Answer 1

原来我错误地导入了组件。
我必须导入

MultiSelect

而不是

MultiSelectComponent