React dropzone - 将文件拖过 dropzone 时触发 dragLeave 事件

Question

我正在使用 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 事件。

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

Answer 1

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

如果没有看到 children 在您的 dropzone 中呈现，就不可能给出具体的修复。不过，一般来说，您必须弄乱 children 的样式。例如，如果将 <p> 标签的大小设置为 0 像素或将其替换为 <span> 标签，则不会出现问题。不幸的是，这两个选项都会干扰 children 的显示。

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

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

Answer 2

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

React dropzone - 将文件拖过 dropzone 时触发 dragLeave 事件

React dropzone - dragLeave event fired when dragging file over dropzone

reactjs

events

draggable

react-dropzone