javascript - 拖动到隐藏的叠加层以显示叠加层

Question

我正在使用一个 js 库react-dropzone来允许用户拖放文件。

用户可以单击按钮打开覆盖以拖放文件，但我还希望能够允许用户拖动到窗口上然后显示窗口。

目前，这不起作用，因为它无法识别onDragOver事件侦听器，因为当前覆盖设置为display: none所以没有继承的高度，所以我拖动到屏幕上，但拖动到覆盖，因为它当前的高度和宽度为0。

这是我UploadOverlay使用的组件react-dropzone

import React, { useCallback, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./UploadOverlay.scss";
import CloseIcon from "./CloseIcon";
import UploadIcon from "./UploadIcon";
import Dropzone from "react-dropzone";
import axios from "axios";

const UploadOverlay = props => {
  const [dragEnter, setDragEnter] = useState(false);
  const [active, setActive] = useState(props.active);
  const MODAL_OPEN_CLASS = "UploadOverlay--Open";

  const config = {
    onUploadProgress: progressEvent => {
      let progress = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      if (progress === 100) {
        props.onClose();
      }
    }
  };

  const onDrop = useCallback(acceptedFiles => {
    setDragEnter(false);
    if (acceptedFiles.length === 0) {
      props.onClose();
    } else {
      var formData = new FormData();
      formData.append("file", acceptedFiles[0]);
      //handle 500 errors.
      axios
        .post("/api/website-user/avatar", formData, config)
        .then(response => {
          props.onSuccess(response);
        });
    }
  }, []);

  useEffect(() => {
    if (props.active) {
      window.scroll({
        top: 0,
        left: 0,
        behavior: "smooth"
      });
      document.body.classList.add(MODAL_OPEN_CLASS);
    } else {
      document.body.classList.remove(MODAL_OPEN_CLASS);
    }
    setActive(props.active);
  }, [props]);

  const onDragEnter = () => {
    setDragEnter(true);
  };

  const handleDropzoneClick = event => {};

  const handleCloseClick = event => {
    event.stopPropagation();
    props.onClose();
  };

  const content = (
    <Dropzone
      accept="image/jpeg, image/png"
      onDrop={onDrop}
      onDragEnter={onDragEnter}
      onDragOver={() => {
        document.body.classList.add(MODAL_OPEN_CLASS);
        setActive(true);
      }}
      onDragLeave={() => {
        document.body.classList.remove(MODAL_OPEN_CLASS);
        setActive(false);
      }}
    >
      {({ getRootProps, getInputProps }) => (
        <div
          className={
            "UploadOverlay " +
            (active ? "UploadOverlay--Active" : "") +
            (dragEnter ? " UploadOverlay-DragEnter" : "") +
            " UploadOverlay--Desktop"
          }
          {...getRootProps({
            onClick: handleDropzoneClick
          })}
        >
          <input {...getInputProps()} />
          <a className="UploadOverlay--CloseIcon" onClick={handleCloseClick}>
            <CloseIcon />
          </a>
          <div className="UploadOverlay--Content">
            <UploadIcon />
            <h1>Upload a Photo</h1>
            <h2 className="UploadOverlay--ContentMsgDesktop">
              Drag and Drop your image to upload it to your profile.
            </h2>
            <h2 className="UploadOverlay--ContentMsgMobile">
              Tap anywhere to upload an image to your profile.
            </h2>
          </div>
        </div>
      )}
    </Dropzone>
  );

  return ReactDOM.createPortal(content, document.body);
};

export default UploadOverlay;

这是我的CSS

.UploadOverlay {
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   display:none;
}

body.UploadOverlay--Open {
   position: relative;
   overflow: hidden;
}

.UploadOverlay.UploadOverlay--Active {
   background:rgba(216, 216, 216, 0.75);
   width:100%;
   height:100%;
   z-index:99;
   display:block;
}

.UploadOverlay.UploadOverlay-DragEnter {
   background:rgba(255, 255, 255, 0.75);
}

.UploadOverlay .UploadOverlay--CloseIcon {
   position: absolute;
   right:25px;
   top:25px;
   cursor: pointer;
}

.UploadOverlay .UploadOverlay--Content {
   display: -ms-flexbox;
   -ms-flex-pack: center;
   -ms-flex-align: center;
   -ms-flex-flow: column wrap;
   display: flex;
   height: 100vh;
   align-items: center;
   justify-content: center;
   flex-flow: column;
}

.UploadOverlay .UploadOverlay--Content h1 {
   text-transform: uppercase;
   font-size: 44px;
   line-height:44px;
   font-weight: bold;
   color: #666666;
   margin:35px 0px 35px 0px;
   padding:0px;
   text-align: center;
}

.UploadOverlay .UploadOverlay--Content h2 {
   margin:0px;
   padding:0px;
   color: #666666;
   max-width:325px;
   text-align: center;
}

我现在有点不知所措。我曾尝试将 of 设置opacity为.UploadOverlay，0但随后我无法单击屏幕上除叠加层以外的任何元素。然后我尝试将z-indexof设置.UploadOverlay为-1然后我无法拖动到屏幕上。

也许，我在结构上走错了路？任何帮助将不胜感激。

如果您想自己尝试一下，我有一个CodeSandbox 。