React dropzone-将文件拖动到dropzone上时触发dragLeave事件

Posted 2023-05-08

【中文标题】React dropzone-将文件拖动到dropzone上时触发dragLeave事件

【英文标题】：React dropzone - dragLeave event fired when dragging file over dropzone

【发布时间】：2019-06-02 23:44:02

【问题描述】：

我正在使用 React dropzone 进行文件上传

<DropZone
            accept='.pdf,.pptx,.ppt,.docx,.doc,.xls,.xlsx,.xslx,.png,.xsl,.jpg,.jpeg,.gif,.zip'
            onDrop= files => 
              this.handleFileDrop(files);
              this.dragLeaveHandler();
             
            onDragEnter= this.dragOverHandler 
            onDragLeave= this.dragLeaveHandler 
            multiple= false 
            style=  height: '100%'  
          >

  dragOverHandler = () => 
    console.log('enter');
    this.setState(
      isDragOver: true,
    );
  ;

  dragLeaveHandler = () => 
    console.log('exit');
    this.setState(
      isDragOver: false,
    );
  ;

当文件在拖放区上方移动时，onDragLeave 事件同时触发。

我应该使用其他一些事件吗？ 我该如何解决这个问题？

【问题讨论】：

看看您作为DropZone 的子级渲染的内容会很有帮助。一些元素，例如<p> 标签，可能会干扰 dom 事件。

【参考方案1】：

您面临的问题很可能是由 DOM 事件 dragEnter 和 dragLeave 搞砸了，而不是 react-dropzone 包中的任何缺陷。某些元素可能会导致在某些位置悬停在它们上方而不注册为悬停在其父元素上。例如，在block 显示元素内呈现的任何普通字符串的顶部边缘都有一个细条。这通常发生在<p> 标记内。

如果没有看到在您的放置区域内呈现的孩子，就不可能给出具体的修复。但是，通常，您将不得不弄乱孩子的样式。例如，<p> 标签在大小设置为 0 像素或替换为 <span> 标签时不会有问题。这两种选择都会破坏孩子们的展示，这是不可避免的。

至于使用其他事件，你不走运。 DropZone 组件依赖于onDragEnter 和onDragLeave html DOM 事件。因此，您可能想出的任何修复都不会修复组件本身。

总而言之，这是一个必须处理的不幸问题。处理它的最简单方法是在 dropzone 内最多只包含一段文本，并使用 css 将其大小设置为 0 像素：height: 0px;。常规的 <div> 元素不会引起问题，因此您可以使用它们制作复杂的拖放区。

【参考方案2】：

您可以在触发拖曳离开的元素上使用pointer-events: none;。这应该仍然允许放置的事件并获取接受的文件，但会停止覆盖 dropzone 事件。