时间戳

首页 > 解决方案 > 从“react-sortable-tree”拖到另一个组件后如何防止删除节点？

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

问题描述

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

我想使用shouldCopyOnOutsideDropprop 来防止将可拖动节点从文件夹树（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;

标签： javascriptreactjsdrag-and-dropreact-dnd

解决方案

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

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

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

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

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

推荐阅读