从 "react-sortable-tree" 拖动到另一个组件后如何防止删除节点？

Question

我使用 "react-sortable-tree" 可视化文件夹树，使用 "react-dnd" 将节点从文件夹树复制到另一个组件。

我想使用 shouldCopyOnOutsideDrop prop 来防止将可拖动节点从文件夹树 (SortableTree) 删除到另一个组件 (DropTarget)，但是我在回调中收到未定义的消息，并且在删除节点后出现错误。

请帮我解决问题。

<SortableTree 
    shouldCopyOnOutsideDrop={node => { 
       console.log('!!shouldCopyOnOutsideDrop node', node); 
       // ... 
       return true;
    }} 
    dndType={'myDndType'} .... > ... 
</ SortableTree>

// !!shouldCopyOnOutsideDrop node {node: undefined, prevTreeIndex: undefined, prevPath: undefined}
// Uncaught TypeError: Cannot read property 'length' of undefined return true;

Answer 1

您可能没有使用 beginDrag 功能。在 DragSource documentation 中查看函数

beginDrag(props, monitor, component) {
    // Return the data describing the dragged item
    const item = { id: props.id };
    return item;
},

此函数将告诉 react-dnd 实际拖动了哪个对象，因此当拖放事件发生时，react-dnd 将为您提供从该函数返回的相同对象。例如，在 DropTarget documentation 中看到函数

  drop(props, monitor, component) {
    if (monitor.didDrop()) {
      // If you want, you can check whether some nested
      // target already handled drop
      return;
    }

    // Obtain the dragged item
    const item = monitor.getItem();

    // You can do something with it
    ChessActions.movePiece(item.fromPosition, props.position);

    // You can also do nothing and return a drop result,
    // which will be available as monitor.getDropResult()
    // in the drag source's endDrag() method
    return { moved: true };
  }
};

在此函数中，监视器持有被拖放到放置目标上的项目

从 "react-sortable-tree" 拖动到另一个组件后如何防止删除节点？

How to prevent removing node after dragging from "react-sortable-tree" to another component?

javascript

reactjs

drag-and-drop

react-dnd