我正在使用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事件将同时触发。
我应该使用其他事件吗？如何解决此问题？
您面临的问题很可能是由DOM事件引起的，dragEnter并且dragLeave变得混乱，而不是react-dropzone程序包中的任何缺陷。某些元素可能会导致在某些位置悬停在其上，而不注册为悬停在其父元素上。例如，在block显示的元素内渲染的任何普通字符串的顶部边缘都有一个细条。最常见的是，这发生在<p>标签内。
如果没有看到在您的拖放区内渲染的子代，就不可能给出特定的解决方案。通常，您将不得不弄乱孩子们的风格。<p>例如，如果标记的大小设置为0像素或被<span>标记替换，则不会有问题。两种选择都会破坏儿童的展示，这是不可避免的。
至于使用其他事件，您很不走运。DropZone组件依赖onDragEnter和onDragLeaveHTML DOM事件。因此，您可能想出的任何修复都不会修复组件本身。
总而言之，这是一个不幸的问题，必须解决。处理它的最简单方法是在dropzone中最多包含一段文本，并使用css：将其大小设置为0像素height: 0px;。常规<div>元素不会导致问题，因此您可以使用它们来制作复杂的Dropzone。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句