Question

我使用“ react-sortable-tree”显示文件夹树，并使用“ react-dnd”将节点从文件夹树复制到另一个组件。

我想使用shouldCopyOnOutsideDrop属性来防止将可拖动节点从文件夹树（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有关实际拖动了哪个对象的信息，因此，在发生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 };
  }
};

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

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

1 个答案: