我有一个带有拖放功能的反应大日历,我希望当我将事件移动到另一个位置时,会出现一个具有类似撤消操作的小吃栏:
我想当我点击撤消动作时,事件设置初始状态(初始位置)
我的代码是:
moveEvent = ({event, start, end, isAllDay: droppedOnAllDaySlot}) => {
const { events } = this.state;
const idx = events.indexOf(event);
let allDay = event.allDay ;
if(!event.allDay && droppedOnAllDaySlot)
{allDay = true;}
else if (event.allDay && !droppedOnAllDaySlot)
{ allDay = false;}
const updatedEvent = { ...event, start, end, allDay }
const nextEvents = [...events]
nextEvents.splice(idx, 1, updatedEvent)
this.setState({
events : nextEvents,
dragAndDrop : true,
open : true
})
}
handleClose = () => {
this.setState({ open: false });
};
handleClick = () => {
this.setState({ open: true });
};
handleUndo = () => {
this.setState({
dragAndDrop : !this.state.dragAndDrop,
events: this.state.events
})
}
render() {
return (
<div>
<DragAndDropCalendar
selectable
localizer={localizer}
events={this.state.events}
views={['month','week','day']}
//defaultDate={new Date(2019, 2, 19)}
defaultView="week"
culture = 'fr'
timeslots={1}
step={15}
style={{ height: "100vh" }}
onEventDrop={this.moveEvent}
min={new Date(2017, 10, 0, 7, 0, 0)}
max={new Date(2017, 10, 0, 21, 0, 0)}
resizable
onEventResize={this.resizeEvent}
onSelectSlot={this.newEvent}
onSelectEvent={this.handleClickOpen}
/>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
open={this.state.open}
autoHideDuration={6000}
onClose={this.handleClose}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">Evénement enregistré</span>}
action={[
<Button key="undo" color="secondary" size="small" onClick={this.handleUndo}>
Annuler
</Button>,
<IconButton
key="close"
aria-label="Close"
color="inherit"
onClick={this.handleClose}
>
<CloseIcon />
</IconButton>,
]}
/>
我的完整代码: https ://codesandbox.io/s/mq42x1j90x
当我运行我的代码并单击撤消操作时,它不起作用,并且我的事件没有设置初始位置。
我该如何解决?