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

Question

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

用户可以单击一个按钮以打开一个叠加层以拖放文件，但是我还希望能够允许用户拖动到窗口上然后显示该窗口。

目前，此操作不起作用，因为它无法识别onDragOver事件侦听器，因为当前叠加层设置为display: none，因此没有继承的高度，因此我将其拖到屏幕上但叠加层的高度和宽度为0。

这是我使用UploadOverlay的{​​{1}}组件

react-dropzone

这是我的css

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;

我现在有点茫然。我曾尝试将.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; } 的{​​{1}}设置为opacity，但随后我无法单击屏幕上除叠加层以外的任何元素。然后，我尝试将.UploadOverlay的{​​{1}}设置为0，然后无法拖动到屏幕上。

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

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