React BigCalendar拖放示例不起作用
React BigCalendar拖放示例不起作用
提问于 2018-06-07 14:14:46
我刚刚浏览了BigCalendar拖放示例。我试着自己创建一个拖放的本地示例，只是想看看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 drag and drop source code源代码复制粘贴过来的。那么为什么拖放示例在我的项目中不起作用呢？
我在本地创建的示例也可以在my my repo here中看到。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-12 02:24:49
create-react-app默认情况下似乎不支持LESS，因此您的Dnd.js中的dragAndDrop的.less导入不起作用。
您可以在项目中设置LESS，也可以直接导入.css文件，因为它已经存在。
要使用dnd.js文件中的.css文件，请更改此导入...
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';
对这个..。
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
Stack Overflow用户
发布于 2018-06-16 19:54:55
检查你的样式加载器。可能并不是所有的样式都按其应有的方式应用，拖放操作需要大量的CSS定位。我在我的项目中也有类似的问题。
Stack Overflow用户
发布于 2019-01-29 17:42:15
import React, { Component } from 'react';
import moment from 'moment';
import BigCalendar from 'react-big-calendar';
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
import "react-big-calendar/lib/css/react-big-calendar.css";
const DragAndDropCalendar = withDragAndDrop(BigCalendar);
const localizer = BigCalendar.momentLocalizer(moment)
class Calendar extends Component {
constructor(props) {
super(props);
this.state = {
events: [
{
start: new Date(),
end: new Date(),
title: "Some title",
id: 1,
allDay: false,
},
{
start: new Date('Wed Jan 30 2019 10:06:44 GMT+0200'),
end: new Date('Thu Jan 31 2019 10:06:44 GMT+0200'),
title: "Some another title",
id: 2,
allDay: false,
}
]
};
this.onEventDrop = this.onEventDrop.bind(this);
this.onEventResize = this.onEventResize.bind(this);
}
onEventResize({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,
})
}
onEventDrop({ 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,
})
}
render() {
const { events } = this.state;
return (
<div>
<DragAndDropCalendar
style={{ height: '100vh' }}
localizer={localizer}
culture="en-GB"
events={events}
defaultDate={new Date()}
defaultView="month"
startAccessor="start"
endAccessor="end"
titleAccessor="title"
onEventResize={this.onEventResize}
onEventDrop={this.onEventDrop}
resizable
selectable
/>
</div>
);
}
}
export default Calendar;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50734092
复制相关文章
相似问题