Reactjs 在拖放区域上拖动文件时闪烁

我正在尝试这样的效果，即窗口显示一个拖放区域，只有当您将文件拖动到该窗口上时，该区域才会填充该窗口，而当您取消拖放文件时，该区域就会消失

几乎所有react dropzone的示例都演示了一个始终可见的dropzone，这不是我想要的

看看这个代码沙盒，了解问题所在

或者在此处检查代码：

import React from "react";
import "./styles.css";
import { useDropzone } from "react-dropzone";
import { Box, makeStyles, createStyles } from "@material-ui/core";

const useStyles = makeStyles(theme =>
  createStyles({
    dropZone: {
      flex: 1,
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      // padding: "20px",
      borderWidth: 2,
      borderRadius: 2,
      borderColor: "#eeeeee",
      borderStyle: "dashed",
      backgroundColor: "#fafafa",
      color: "#bdbdbd",
      outline: "none",
      transition: "border .24s ease-in-out",
      position: "absolute",
      width: "calc(100% - 4px)",
      height: "calc(100% - 4px)",
      zIndex: 10
    }
  })
);
const useDropzoneInternal = () => {
  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
    noClick: true
  });
  const inputProps = getInputProps();
  const { ref, ...rootProps } = getRootProps();
  return { rootProps, inputProps, ref, open, isDragActive };
};

export default function App() {
  const classes = useStyles();
  let { rootProps, isDragActive, inputProps } = useDropzoneInternal();

  return (
    <div className="App">
      <Box
        {...rootProps}
        display="flex"
        flexDirection="column"
        flexGrow={1}
        position="relative"
      >
        {isDragActive && (
          <Box className={classes.dropZone}>
            <Box>
              <input {...inputProps} />
              {<p>Drop the files here ...</p>}
            </Box>
          </Box>
        )}
        <h1>Hello CodeSandbox</h1>
        <h2>Drag a file here!</h2>
        <h2>Unfortunately, the drop zone appears and disappears</h2>
        <h2>Because the gray area covers the parent</h2>
        <h2>And hijack the onDragEvent</h2>
        <h2>Start editing to see some magic happen!</h2>
        <h2>Start editing to see some magic happen!</h2>
        <h2>Start editing to see some magic happen!</h2>
        <h2>Start editing to see some magic happen!</h2>
        <h2>Start editing to see some magic happen!</h2>
      </Box>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
从“react dropzone”导入{useDropzone}；
从“@material ui/core”导入{Box，makeStyles，createStyles}；
const useStyles=makeStyles（主题=>
创建样式({
dropZone：{
弹性：1，
显示：“flex”，
flexDirection:“列”，
对齐项目：“中心”，
//填充：“20px”，
边界宽度：2，
边界半径：2，
边框颜色：“eeeeee”，
边框样式：“虚线”，
背景色：“fafafa”，
颜色：“bdbdbd”，
大纲：“无”，
过渡：“border.24s易入易出”，
位置：“绝对”，
宽度：“计算（100%-4px）”，
高度：“计算（100%-4px）”，
zIndex:10
}
})
);
常量useDropzoneInternal=（）=>{
const{getRootProps，getInputProps，isDragActive，open}=useDropzone({
诺克利克：是的
});
const inputProps=getInputProps（）；
const{ref，…rootProps}=getRootProps（）；
返回{rootProps，inputProps，ref，open，isDragActive}；
};
导出默认函数App（）{
const classes=useStyles（）；
让{rootProps，isDragActive，inputProps}=useDropzoneInternal（）；
返回(
{isDragActive&&(
{将文件放到这里…
}
)}
你好，代码沙盒
把文件拖到这里！
不幸的是，下降区出现并消失
因为灰色区域覆盖了父对象
劫持事件
开始编辑，看看神奇的发生！
开始编辑，看看神奇的发生！
开始编辑，看看神奇的发生！
开始编辑，看看神奇的发生！
开始编辑，看看神奇的发生！
);
}

当isDragActive为true时，您可以看到我正在显示dropzone，但它会立即翻转回false，因为新显示的区域覆盖了父div（可能会取消拖动事件）

---

我怎样才能避开这件事？有什么建议吗？

我发现遗漏了什么，正如我所料，这很愚蠢，您需要将

ref

传递给决定拖动事件边界的父元素

  let { ref, rootProps, isDragActive, inputProps } = useDropzoneInternal();

  return (
    <div className="App" ref={ref}>

let{ref，rootProps，isDragActive，inputProps}=useDropzoneInternal（）；
返回(

或者，如果您想坚持使用材质UI组件：

<div className="App">
  <RootRef rootRef={ref}>
    <Box
      {...rootProps}
      display="flex"
      flexDirection="column"