Reactjs React dropzone-在dropzone上拖动文件时激发dragLeave事件

我正在使用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,
    });
  };

{
此.handleFileDrop（文件）；
this.dragLeaveHandler（）；
} }
onDragEnter={this.dragOverHandler}
onDragLeave={this.dragLeaveHandler}
多重={false}
样式={{height:'100%}}
>
德拉戈弗汉德勒=（）=>{
console.log（'enter'）；
这是我的国家({
伊斯特拉戈弗：是的，
});
};
dragLeaveHandler=（）=>{
console.log（'exit'）；
这是我的国家({
伊斯特拉戈弗：错，
});
};

当文件在放置区域上方移动时，onDragLeave事件同时激发

我应该使用其他事件吗？

---

如何解决此问题？

您面临的问题很可能是由DOM事件

dragEnter

和

dragLeave

出错引起的，而不是

react dropzone

包中的任何缺陷。某些元素可能会导致将鼠标悬停在其上的某些位置，而不会注册为鼠标悬停在其父元素上。例如，在

块

显示的元素内渲染的任何普通字符串的上边缘都有一条细条。这通常发生在

标记中

如果看不到dropzone中渲染的子对象，就不可能给出特定的修复。不过，通常情况下，你不得不打乱孩子们的造型<代码>例如，如果标签的大小设置为0像素，或者如果标签被替换为

标签，则标签不会有问题。这两种选择都会破坏孩子们的展示，这是不可避免的

至于使用其他事件，你运气不好。DropZone组件依赖于

onDragEnter

和

onDragLeave

HTMLDOM事件。因此，您可能提出的任何修复都不会修复组件本身

---

总而言之，这是一个必须解决的不幸问题。最简单的处理方法是在dropzone中最多有一段文本，并使用css将其大小设置为0像素：

height:0px。常规
元素不会引起问题，因此您可以使用它们创建复杂的dropzone。
您可以使用
指针事件：无在发射左拖的元素上。这将仍然允许删除事件并获取接受的文件，但这将停止覆盖dropzone事件。
查看您作为
dropzone
的子级呈现的内容会很有帮助。有些元素，如
标记，可能会干扰dom事件。