reactjs - 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

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