使用 React beautiful dnd 无法拖动组件

Question

我一直在尝试实现这个观看教程，但这不起作用。我已经安装了 React beautiful dnd 和相关软件包。我必须删除与此问题无关的代码，也不允许我发布（如果需要，请询问我） 。 应用程序.tsx .

const App: React.FC = () => {
  //states and extra code

  const onDragEnd = (result: DropResult) => {
    const { destination, source } = result;
    console.log(result);
    if (!destination) {
      return;
    }
    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }
    let add;
    const active = todos;
    const complete = completedTodos;
    if (source.droppableId === "TodosList") {
      add = active[source.index];
      active.splice(source.index, 1);
    } else {
      add = complete[source.index];
      complete.splice(source.index, 1);
    }
    if (destination.droppableId === "TodosList") {
      active.splice(destination.index, 0, add);
    } else {
      complete.splice(destination.index, 0, add);
    }
    setCompletedTodos(complete);
    setTodos(active);
  };
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div className="App">
       //code
      </div>
    </DragDropContext>
  )
}

这里是 。 待办事项列表.tsx .

 <Droppable droppableId='TodosList'>
                {
                    (provided) =>
                        <div className="todos" ref={provided.innerRef}{...provided.droppableProps}>
                            //code
                            {provided.placeholder}
                        </div>}</Droppable>
            <Droppable droppableId='RemoveList'>
                {(provided) =>
                        <div className="todos remove" ref={provided.innerRef}{...provided.droppableProps}>//code
                            {provided.placeholder}
                        </div>
                }
            </Droppable>

这里是

。 SingleTodo.tsx .

        <Draggable draggableId={todo.id.toString()} index={index}>
            {
                (provided) =>
                    <form onSubmit={(e) => handleEdit(e, todo.id)} className="todos__single" {...provided.dragHandleProps}{...provided.draggableProps} ref={provided.innerRef}>
                        //code
                    </form >
            }
        </Draggable>

Answer 1

我已经使用 React 18 的工作组件创建了 github 存储库，请随意克隆/给予爱心/重用:) https://github.com/adziusmaster/DraggableComponent/tree/main