使用React+Typescript在FullCalendar中同时拖动多个元素

Question

我的 React 应用程序在使用 FullCalendar 和 FullCalendar Interaction 中的 Draggable 时遇到问题。当我尝试将其中一个块从“Bölgeler”div 拖到日历中时，它会在放置位置放置多个事件。另外，它似乎没有在事件列表中添加任何内容。

这是我当前的代码：

import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin, {
  Draggable,
  DropArg,
} from "@fullcalendar/interaction";
import allLocales from "@fullcalendar/core/locales-all";
import React, { useEffect, useState } from "react";

interface MyEvent {
  id: string;
  title: string;
  date: string;
  color: string;
}

function App() {
  const [events, setEvents] = useState<MyEvent[]>([]);

  useEffect(() => {
    const containerEl = document.querySelector("#bolgeler");

    if (containerEl instanceof HTMLElement) {
      new Draggable(containerEl, {
        itemSelector: ".bolge",
        eventData: (eventEl) => {
          return {
            id: Math.floor(Math.random() * 1000).toString(),
            title: eventEl.innerText,
            color: window.getComputedStyle(eventEl).backgroundColor,
          };
        },
      });
      console.log(events);
    } else {
      console.error("Container element not found");
    }
  }, []);

  const handleEventDrop = (dropInfo: DropArg) => {
    const { draggedEl, date } = dropInfo;
    const title = draggedEl.innerText;
    const color = window.getComputedStyle(draggedEl).backgroundColor;

    const newEvent = {
      id: Math.floor(Math.random() * 1000).toString(),
      title,
      date: date.toISOString(),
      color,
    };

    setEvents((prevEvents) => [...prevEvents, newEvent]);

    console.log(events);
  };

  const handleEventRemove = (eventToRemoveId: string) => {
    setEvents((prevEvents) =>
      prevEvents.filter((event) => event.id !== eventToRemoveId)
    );
  };

  return (
    <>
      <div id="takvim">
        <FullCalendar
          windowResizeDelay={100}
          handleWindowResize={true}
          height={650}
          plugins={[timeGridPlugin, interactionPlugin]}
          slotLabelFormat={{
            hour: "2-digit",
            minute: "2-digit",
          }}
          editable={true}
          droppable={true}
          allDaySlot={false}
          dayHeaderFormat={{
            weekday: "long",
          }}
          locales={allLocales}
          locale={"tr"}
          buttonText={{
            today: "Bugün",
          }}
          events={{ events }}
          drop={() => handleEventDrop}
          eventClick={(info) => {
            if (
              window.confirm(
                `Are you sure you want to delete the event '${info.event.id}'?`
              )
            ) {
              handleEventRemove(info.event.id);
            }
          }}
        />
      </div>

      <div id="bolgeler">
        <p>
          <strong>Bölgeler</strong>
        </p>
        <div className="bolge" style={{ backgroundColor: "red" }}>
          Bölge 1
        </div>
        <div className="bolge" style={{ backgroundColor: "green" }}>
          Bölge 2
        </div>
        <div className="bolge" style={{ backgroundColor: "blue" }}>
          Bölge 3
        </div>
        <div className="bolge" style={{ backgroundColor: "orange" }}>
          Bölge 4
        </div>
        <div className="bolge" style={{ backgroundColor: "brown" }}>
          Bölge 5
        </div>
      </div>
    </>
  );
}
export default App;

我使用 useState 来维护事件列表，并使用 useEffect 来初始化“Bölgeler”div 中的块的可拖动功能。 handleEventDrop 函数在放置时触发，我在其中创建一个新事件并尝试使用 setEvents 更新事件列表，但它没有反映预期的行为。

我希望当我将一个块拖到日历上时，它应该只删除一个事件并将该事件添加到事件列表中。但是，它似乎删除了多个事件并且没有正确更新列表。

如何确保将块拖到日历上时仅删除一个事件，以及如何通过相应更新事件列表来解决问题？

Answer 1

由于您为 Draggable 提供了

eventData

，当您将其拖放到日历上时，fullCalendar 会自动在日历中为您创建一个事件。有关更多详细信息，请参阅完整日历文档中的外部事件拖动（在“关联事件数据”部分中）。

您不应该还需要调用

setEvents()

- 所以实际上您可能根本不需要处理

drop

回调。我不是 React 用户，但我强烈怀疑这就是导致你的 drop 事件出现两次的原因。