时间戳

首页 > 解决方案 > 如何在 React 上使用撤消操作设置初始状态？

javascript - 如何在 React 上使用撤消操作设置初始状态？

问题描述

我有一个带有拖放功能的反应大日历，我希望当我将事件移动到另一个位置时，会出现一个具有类似撤消操作的小吃栏：

在此处输入图像描述

我想当我点击撤消动作时，事件设置初始状态（初始位置）

我的代码是：

 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

当我运行我的代码并单击撤消操作时，它不起作用，并且我的事件没有设置初始位置。

我该如何解决？

标签： javascriptreactjsdrag-and-dropsetstatereact-big-calendar

解决方案

我建议将以前的事件存储在 this.state(例如this.state.previousEvents)中的单独字段中，并在undo()操作中将当前事件设置为以前的事件。此外，当用户关闭snackbar 或执行一些其他更改事件且无法恢复的操作时，不要忘记将previousEvents 更新为当前事件值。

也不要在this.setState中使用this.state 

this.setState({
        dragAndDrop : !this.state.dragAndDrop,
        events: this.state.events
      })

你应该使用previousState：

this.setState((prevState) => ({
        dragAndDrop : !prevState.dragAndDrop,
        events: prevState.events
      }))

所以完整版是

class Calendar extends Component {
  state  = {
    events: [],
    prevEvents: []
  };

  handleUndo = () => {
    this.setState((prevState) => ({
      events: prevState.prevEvents
    }))
  }

  handleCloseSnackbar = () => {
    this.setState((prevState) => ({
      prevEvents: prevState.events
    }))
  }

  ...
}

推荐阅读