从“react-sortable-tree”拖到另一个组件后如何防止删除节点？答案

【问题标题】：How to prevent removing node after dragging from "react-sortable-tree" to another component?从“react-sortable-tree”拖到另一个组件后如何防止删除节点？
【发布时间】：2019-02-06 07:12:20
【问题描述】：

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

我想使用shouldCopyOnOutsideDrop prop 来防止将可拖动节点从文件夹树 (SortableTree) 删除到另一个组件 (DropTarget)，但是在删除节点后我在回调中收到 undefined 和错误。

请帮我解决问题。

<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;

【问题讨论】：

你是在 onDrag 还是 onDrop 上返回一些东西？
不，我没有声明这个功能。
您需要，在这些事件中，您将返回一个您将在放置时捕获的对象
请给我一个实现的例子

标签： javascript reactjs drag-and-drop react-dnd

【解决方案1】：

您可能没有使用beginDrag 函数。在 DragSource documentation 看到函数

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

这个函数将告诉 react-dnd 哪个对象实际被拖动，所以当 drop 事件发生时，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 };
  }
};

在此功能监视器中，将正在拖放的项目保持在放置目标上

【讨论】：