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

Question

在 docs它说:

DragHandleProps need to be applied to the node that you want to be the drag handle. This is a number of props that need to be applied to the <Draggable /> node. The simplest approach is to spread the props onto the draggable node ({...provided.dragHandleProps}). However, you are also welcome to monkey patch these props if you also need to respond to them. DragHandleProps will be null when isDragDisabled is set to true.

dragHandleProps Type information

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>