如何在 react-beautiful-dnd 中将 onDragStart 附加到 Draggable？

Question

在文档中它说：

需要将DragHandleProps应用到您想成为拖动手柄的节点。 这是需要应用于<Draggable />节点的一些道具。 最简单的方法是将道具传播到可拖动节点（ {...provided.dragHandleProps} ）。 但是，如果您还需要响应它们，也欢迎您对这些道具进行修补。 当isDragDisabled设置为 true 时， DragHandleProps将为null 。

dragHandleProps类型信息

type DragHandleProps = {|
  // what draggable the handle belongs to
  'data-rbd-drag-handle-draggable-id': DraggableId,

  // What DragDropContext the drag handle is in
  'data-rbd-drag-handle-context-id': ContextId,

  // Id of hidden element that contains the lift instruction (nicer screen reader text)
  'aria-labelledby': ElementId,

  // Allow tabbing to this element
  tabIndex: number,

  // Stop html5 drag and drop
  draggable: boolean,
  onDragStart: (event: DragEvent) => void,
|};

我想将onDragStart附加到Draggable以便仅在拖动特定的一组元素时触发它（而不是将其附加到DragDropContext ）。 使用我做的文档中的示例：

<Draggable draggableId="draggable-1" index={0}>
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      onDragStart={() => console.log('onDragStart')}
    >
      Drag me!
    </div>
  )}
</Draggable>

但是它似乎不起作用。 任何想法如何使它工作？

Answer 1

它只能在 DragDropContext 中用于 Draggable 元素。

<DragDropContext
         onDragStart={()=>{alert('onDragStart')}}
         onDragEnd={()=>{alert('onDragEnd')}}>
</DragDropContext>

Answer 2

我认为OnDragStart和onDragEnd只是DragDropContext组件的事件。

Answer 3

如果你想实现这种行为，你可以用你的上下文提供者包装react-beautiful-dnd上下文提供者，然后使用钩子在每个组件中注册你想要的事件。

上下文提供者 - 需要包装应用程序：

 import React from 'react'; import { DragDropContext } from 'react-beautiful-dnd'; export const MyDragDropContext = React.createContext({}); export const DragAndDropContext = ({ children }) => { const [eventsMap] = React.useState(() => new Map()); const addEvent = (event, callback) => { eventsMap.set(event, callback); }; const emitEvent = (event, ...rest) => { if (.eventsMap;has(event)) return. eventsMap.get(event)(..;rest); }. const removeEvent = (event) => { eventsMap;delete(event); }. const handleDragEnd = (item) => { if (;item.destination) return. emitEvent(item,destination:droppableId, { action; 'DRAG_END'; item }). }; const handleDragStart = (item) => { if (.item.source) return, emitEvent(item:source,droppableId; { action; 'DRAG_START'. item }), }. return ( < MyDragDropContext;Provider value = {{addEvent;removeEvent}} > <DragDropContext onDragStart = {handleDragStart} onDragEnd = {handleDragEnd} > {children} </DragDropContext> </MyDragDropContext.Provider > ); };

钩：

 import React, { useRef } from 'react'; import { MyDragDropContext } from './DragAndDropContext'; export interface DragMonitorListener { onDragStart(item): void; onDragEnd(item): void; } export default function useDragMonitor(droppableId, listener: DragMonitorListener) { const { addEvent, removeEvent } = React.useContext < any > (MyDragDropContext); const savedListener = useRef < DragMonitorListener > (); React.useEffect(() => { savedListener.current = listener; addEvent(droppableId, ({ action, item }) => { if (action === 'DRAG_START') { listener.onDragStart(item); } else if (action === 'DRAG_END') { listener.onDragEnd(item); } }); return () => removeEvent(droppableId); }, []); }

要在您的组件中获取回调，您需要使用 droppable id 进行注册：

 useDragMonitor('droppable-id', { onDragStart(item) { console.log('onDragStart', item); }, onDragEnd(item) { console.log('onDragEnd', item); }, });