React Big​​Calendar拖放示例不起作用应该怎么解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (257)

我尝试创建一个本地拖放的示例,以查看拖放操作对BigCalendar的影响。我创建了以下内容:

Dnd.js

import React from 'react'
import events from './events'
import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContext } from 'react-dnd'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import 'react-big-calendar/lib/css/react-big-calendar.css';

import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';

const DragAndDropCalendar = withDragAndDrop(BigCalendar)

class Dnd extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      events: events,
    }

    this.moveEvent = this.moveEvent.bind(this)
  }

  moveEvent({ event, start, end }) {
    const { events } = this.state

    const idx = events.indexOf(event)
    const updatedEvent = { ...event, start, end }

    const nextEvents = [...events]
    nextEvents.splice(idx, 1, updatedEvent)

    this.setState({
      events: nextEvents,
    })

    alert(`${event.title} was dropped onto ${event.start}`)
  }

  resizeEvent = (resizeType, { event, start, end }) => {
    const { events } = this.state

    const nextEvents = events.map(existingEvent => {
      return existingEvent.id == event.id
        ? { ...existingEvent, start, end }
        : existingEvent
    })

    this.setState({
      events: nextEvents,
    })

    alert(`${event.title} was resized to ${start}-${end}`)
  }

  render() {
    return (
      <DragAndDropCalendar
        selectable
        events={this.state.events}
        onEventDrop={this.moveEvent}
        resizable
        onEventResize={this.resizeEvent}
        defaultView="week"
        defaultDate={new Date(2015, 3, 12)}
      />
    )
  }
}

export default DragDropContext(HTML5Backend)(Dnd)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Knight from './knight/knight';
import Square from './square/square';
import Board from './board/board';
import Dnd from './bigcalender/dnd';
import { moveKnight , observe } from './game';
import BigCalendar from 'react-big-calendar'
import SimpleDrag from './simpleDrag/simpleDrag';
import moment from 'moment';

BigCalendar.momentLocalizer(moment);

const rootEl = document.getElementById('root');

ReactDOM.render(
    <Dnd />,
    rootEl
)

日历显示所有事件都很好,问题是拖放功能不起作用。该代码几乎是来自BigCalendar拖放源代码源的副本粘贴。那么为什么拖放示例不能在我的项目中工作?

提问于
用户回答回答于

看来LESS react-create-app默认不支持。这就是说LESS文件的导入应该是错误的,而不是默默地失败。

可以使用LESS CLI编译.less文件.css,或者.css直接导入文件,而不是导入.less文件。

如果只想使用BigCalendar .css(这将是最简单的),在dnd.js文件中更改此导入

import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';

对此

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

否则将不得不编译你的.less文件.css

扫码关注云+社区

领取腾讯云代金券