react-beautiful dnd DragDropContext未触发onDragEnd

Question

我正在使用react-beautiful dnd对列表进行重新排序，并遵循example

一切看起来都很好，控制台中没有错误或警告消息，拖放动画看起来很有希望，但onDragEnd和onDragStart根本不会触发

我不明白，我错过了什么

import { IControlPlaneConfig } from "../../entities/controlPlane";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import Tag from "../../components/Tag";

interface IProps {
  controlPlaneConfig: IControlPlaneConfig;
  setFloorOrder: (floorOrder: number[]) => void;
}

const FloorOrder = (props: IProps) => {
  return (
    <div className="flex">
      <DragDropContext onDragEnd={console.log} onDragStart={console.log}>
        <div className="w-1/2 flex flex-col items-center">
          <Tag color="primary">Floor to Show</Tag>

          <ul className="menu w-16 py-3 shadow-lg bg-base-100 rounded-box">
            <Droppable droppableId="show-list">
              {(provided) => (
                <div ref={provided.innerRef} {...provided.droppableProps}>
                  {props.controlPlaneConfig.floor_order.map((f, i) => {
                    return (
                      <Draggable key={`${f}`} draggableId={`${f}`} index={i}>
                        {(provided) => (
                          <li
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            className="select-none"
                          >
                            <a>{props.controlPlaneConfig.floor_names[f]}</a>
                          </li>
                        )}
                      </Draggable>
                    );
                  })}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </ul>
        </div>
      </DragDropContext>
    </div>
  );
};

export default FloorOrder;

"react-beautiful-dnd": "^13.1.0"

Answer 1

已通过删除修复