完整日历-将外部事件拖到日历中，但是处于状态的事件数组不会更新

Question

我在我的React项目中使用完整日历。

当我将外部事件拖到日历中时，尽管外部事件在日历中可见，但未更新链接到日历的事件数组

初始状态

calendarEvents: ["Event 1", "Event 2"],
externalEvents: ["Event 2", "Event 3"]

将名为事件2的事件拖到日历中后，外部事件不会更改

状态应为：

import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import "./styles.css";
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

export default class DemoApp extends React.Component {
  calendarComponentRef = React.createRef();

  state = {
    calendarWeekends: true,
    calendarEvents: [{ title: "Event 1", start: new Date() }],
    externalEvents: [
      { title: "Event 2", start: new Date() },
      { title: "Event 3", start: new Date() }
    ]
  };

  render() {
    return (
      <div className="demo-app">
        <div
          id="external-events"
          style={{
            display: "inline-block",
            width: "50%"
          }}
        >
          <h4>External event</h4>
          {this.state.externalEvents.map(event => {
            return (
              <div
                className="fc-event"
                title={event.title}
                id={event.id}
                key={event.id}
                style={{
                  marginBottom: "2px",
                  marginRight: "10px",
                  padding: "3px",
                  cursor: "pointer"
                }}
              >
                {event.title}
              </div>
            );
          })}
        </div>
        <div
          style={{
            display: "inline-block",
            width: "50%"
          }}
        >
          <h4>Events from state</h4>
          {this.state.calendarEvents.map(event => {
            return (
              <div
                style={{
                  marginBottom: "2px",
                  marginRight: "10px",
                  padding: "3px",
                  cursor: "pointer",
                  backgroundColor: "green"
                }}
              >
                {event.title}
              </div>
            );
          })}
        </div>
        <div className="demo-app-calendar">
          <FullCalendar
            defaultView="dayGridMonth"
            header={{
              left: "prev,next today",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
            }}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            ref={this.calendarComponentRef}
            weekends={this.state.calendarWeekends}
            events={this.state.calendarEvents}
            dateClick={this.handleDateClick}
          />
        </div>
      </div>
    );
  }

  componentDidMount() {
    let draggableEl = document.getElementById("external-events");
    new Draggable(draggableEl, {
      itemSelector: ".fc-event",
      eventData: function(eventEl) {
        let title = eventEl.getAttribute("title");
        let id = eventEl.getAttribute("id");
        return {
          title: title,
          id: id
        };
      }
    });
  }
}

这是我的示例代码：https://codesandbox.io/embed/fullcalendar-react-jp7n1

谢谢您的帮助。

contenteditable