React应用react-big-calendar拖拽失效，如何正确配置DndContext？

1. 补全依赖安装 #

新版react-big-calendar的拖拽插件仍然依赖react-dnd和react-dnd-html5-backend，首先需要确认这两个包已经正确安装，执行安装命令：

npm install react-dnd react-dnd-html5-backend
# 或者使用yarn
yarn add react-dnd react-dnd-html5-backend

注意：推荐安装react-dnd@16+版本适配最新版react-big-calendar，避免版本兼容报错

2. 调整代码配置 #

你当前的代码缺少Dnd后端配置，同时onEventDrop方法没有更新状态，导致拖拽后没有视觉反馈，完整修改后的代码如下：

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";
// 新增引入HTML5Backend
import { HTML5Backend } from 'react-dnd-html5-backend'

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);
// 修改DnDCalendar初始化，传入backend配置
const DnDCalendar = withDragAndDrop(Calendar, { backend: HTML5Backend });

class App extends Component {
  state = {
    events: [
      {
        id: 1, // 新增事件唯一id，方便更新时定位
        start: moment().toDate(),
        end: moment().add(1, "days").toDate(),
        title: "Some title",
      },
    ],
  };

  onEventResize = (data) => {
    const { start, end, event } = data;
    // 优化更新逻辑，不直接修改原状态
    const updatedEvents = this.state.events.map(ev => {
      if (ev.id === event.id) {
        return {...ev, start, end}
      }
      return ev
    })
    this.setState({ events: updatedEvents });
  };

  onEventDrop = (data) => {
    const { start, end, event } = data;
    // 新增drop后的状态更新逻辑，修改对应事件的时间
    const updatedEvents = this.state.events.map(ev => {
      if (ev.id === event.id) {
        return {...ev, start, end}
      }
      return ev
    })
    this.setState({ events: updatedEvents });
  };

  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;

3. 可选配置方案 #

如果上述配置仍然无效，也可以选择用DndProvider包裹根组件，和在withDragAndDrop中传backend参数效果一致，二选一即可，不要同时配置避免冲突：
在项目入口index.js中修改：

import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

ReactDOM.render(
  <DndProvider backend={HTML5Backend}>
    <App />
  </DndProvider>,
  document.getElementById('root')
)

修改完成后重启项目即可正常拖拽移动/缩放日历事件，若仍有问题可检查浏览器控制台的报错信息，调整对应依赖版本即可解决。

内容的提问来源于stack exchange，提问作者David Park