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程序包中的任何缺陷引起的。某些元素可能会导致在某些位置悬停在其上，而不注册为悬停在其父元素上。例如，在block显示的元素内呈现的任何普通字符串的顶部边缘都有一个细条。最常见的是，这种情况发生在<p>标签内。

如果看不到子区域内部渲染的子代，则无法给出特定的解决方案。通常，您将不得不弄乱孩子的样式。例如，如果<p>标签的大小设置为0像素或将其替换为<span>标签，则不会有问题。这两种选择都会破坏孩子的展示，这是不可避免的。

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

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

Answer 2

您可以在触发拖动假的元素上使用pointer-events: none;。尽管这样会停止覆盖dropzone事件，但仍然应该允许drop事件和获取接受的文件。

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

2 个答案: