Реагировать - перетащить простой вертикальный список не работает должным образом - PullRequest
0 голосов
/ 13 июня 2019

У меня есть компонент, который отображает список с задачами.Список представляет собой массив объектов, каждый из которых имеет свойство number, id и фактический объект task.Каждый объект выглядит примерно так:

{ 
  id: 1,
  number: 1, 
  task: {
   id: 1,
   ...otherProps
}

Я создал контейнер с возможностью сбрасывания для компонента таблицы:

<Table droppable ...otherProps>
  <TaskRow onDragStart={onDragStart} onDragOver={onDragOver} onDragEnd={onDragEnd}>
</Table>

И в моем родительском компоненте у меня есть методы, которые имеют дело с onDragStart, onDragOver и onDragEnd события.Вот как они выглядят:

  onDragStart(taskId) {
    this.setState(prevState => {
      return {draggedTask: prevState.exam.examsTasks.find(examTask => examTask.task.id === taskId)}
    });
  }

  onDragOver(taskId) {
    this.setState(prevState => {
      const replacedTaskIndex = prevState.exam.examsTasks.findIndex(examTask => examTask.task.id === taskId);
      const draggedTaskIndex = prevState.exam.examsTasks.findIndex(examTask => examTask.task.id === prevState.draggedTask.id);

      if (replacedTaskIndex === draggedTaskIndex) {
        return;
      }

      const replacedTask = prevState.exam.examsTasks[replacedTaskIndex];
      const newTaskList = [...prevState.exam.examsTasks];

      newTaskList[replacedTaskIndex] = {...prevState.draggedTask, number: replacedTask.number};
      newTaskList[draggedTaskIndex] = {...replacedTask, number: prevState.draggedTask.number};
      const exam = {...prevState.exam, examsTasks: newTaskList};
      return {exam};
    });
  }

В onDragStart Я просто устанавливаю значение draggedTask для объекта, который перетаскивается.Я переключаю значение свойства number onDragOver event, из двух объектов, один из которых перетаскивается, а другой заменяется, и устанавливаю состояние заданий экзамена на новый массив.В onDrageEnd я просто устанавливаю draggedTask на ноль.

onDragEnd={() => this.setState({draggedTask: null})}

Это очень запаздывает и работает нормально, если я заменяю строки, расположенные близко друг к другу, но это не работает при попытке заменить строки, которыенемного дальше.Я делаю что-то не так и есть ли лучший способ сделать это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...