Question

我有一个组件，用于显示带有任务的列表。该列表是一个对象数组，它们全部具有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的值设置为要拖动的对象之一。我要切换两个对象（一个被拖动，另一个被替换）的数字属性onDragOver事件的值，并将检查任务的状态设置为新数组。在onDrageEnd中，我只是将draggedTask设置为null。

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

这很滞后，如果我要替换彼此靠近的行，则效果很好，但是在尝试替换距离较远的行时会中断。我做错什么了吗，还有更好的方法吗？

反应-拖放简单的垂直列表无法正常工作

0 个答案: