Как установить начальное состояние с отменой действия на React? - PullRequest
Новая
       25

Как установить начальное состояние с отменой действия на React?

0 голосов
/ 29 марта 2019

У меня есть календарь реагирования-большого с перетаскиванием, я хочу, чтобы при перемещении события в другую позицию появлялась закусочная, в которой выполнялось действие отмены:

enter image description here

Я хочу, чтобы при нажатии на действие отмены событие установило начальное состояние (начальную позицию)

Мой код: 

 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

Когда я запускаю свой код и нажимаю на действие отмены, оно не работает, и мое событие не устанавливает начальную позицию.

Как можноЯ это исправлю?

1 Ответ

2 голосов
/ 29 марта 2019

Я предлагаю хранить предыдущие события в отдельном поле внутри this.state (например, this.state.previousEvents) , а при действии undo () установить текущие события на предыдущиеСобытия.Кроме того, когда пользователь закрывает снэк-бар или выполняет какое-либо другое действие, которое изменяет события и не может быть отменено, не забудьте обновить предыдущие события как значение текущих событий.

Также вместо использования this.state in this.setState 

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
    }))
  }

  ...
}
...