Question

在docs中说：

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

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

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

Answer 2

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

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

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

2 个答案: