reactjs - 拖放在 React App 上不起作用。如何在我的代码中实现 DndContext

Question

应用程序.js

import React, { Component } from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";

import "./App.css";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
import "react-big-calendar/lib/css/react-big-calendar.css";

const localizer = momentLocalizer(moment);
const DnDCalendar = withDragAndDrop(Calendar);

class App extends Component {
  state = {
    events: [
      {
        start: moment().toDate(),
        end: moment().add(1, "days").toDate(),
        title: "Some title",
      },
    ],
  };

  onEventResize = (data) => {
    const { start, end } = data;

    this.setState((state) => {
      state.events[0].start = start;
      state.events[0].end = end;
      return { events: [...state.events] };
    });
  };

  onEventDrop = (data) => {
    console.log(data);
  };

  render() {
    return (
        <div className="App">
          <DnDCalendar
              defaultDate={moment().toDate()}
              defaultView="month"
              events={this.state.events}
              localizer={localizer}
              onEventDrop={this.onEventDrop}
              onEventResize={this.onEventResize}
              resizable
              style={{ height: "100vh" }}
          />
        </div>
    );
  }
}


export default App;

当我尝试运行 React 应用程序时，它会发布，但我无法移动事件。我不知道我错过了什么。我目前正在关注关于在 React 上制作大日历的教程，但这就是教程离开我的地方。我猜想这与 DndContext 有关，因为我正在查看他们使用 DndContext 和 HTML5Backend 的旧教程，但我不知道如何将其与更新的代码对应。任何帮助将不胜感激。如果有任何其他信息我应该分享，请告诉我。

标签： reactjs