javascript - 如何在 React 上设置具有撤消操作的初始状态？

Question

我有一个带有拖放功能的 react 大日历，我希望当我将事件移动到另一个位置时，会出现一个具有撤消操作的 snackbar :

我希望当我点击撤消操作时，事件设置初始状态(初始位置)

我的代码是:

 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

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

我该如何解决这个问题？

Answer 1

我建议将以前的事件存储在 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
    }))
  }

  ...
}