1

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

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

4

2 回答 2

2

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

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

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

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

于 2019-01-09T17:00:34.597 回答
2

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

于 2020-07-17T08:54:53.413 回答