Блог

Я работаю над списком повторного заказа с помощью react-beautiful-dnd и следующего примера

Все выглядит нормально, ни ошибок, ни предупреждающих сообщений в консоли, анимация перетаскивания выглядит многообещающе, но 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.StrictMode>