react-beautiful-dnd DragDropContext 没有触发 onDragEnd
react-beautiful-dnd DragDropContext not firing onDragEnd
我正在使用 react-beautiful-dnd 重新排序列表,并关注 example
一切看起来都很好控制台中没有错误或警告消息,drag/drop动画看起来很有希望,但 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"
已通过删除修复
我正在使用 react-beautiful-dnd 重新排序列表,并关注 example
一切看起来都很好控制台中没有错误或警告消息,drag/drop动画看起来很有希望,但 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"
已通过删除修复