У меня есть компонент, который отображает список с задачами.Список представляет собой массив объектов, каждый из которых имеет свойство 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})}
Это очень запаздывает и работает нормально, если я заменяю строки, расположенные близко друг к другу, но это не работает при попытке заменить строки, которыенемного дальше.Я делаю что-то не так и есть ли лучший способ сделать это?