Мерцание при перетаскивании файла в зону перетаскивания - PullRequest
Новая
       33

Мерцание при перетаскивании файла в зону перетаскивания

0 голосов
/ 15 апреля 2020

Я пытаюсь создать эффект, когда в окне отображается зона перетаскивания, которая заполняет окно только при перетаскивании файла поверх него и исчезает при отмене перетаскивания файла.

Почти все примеры response-dropzone демонстрируют зону перетаскивания, которая всегда видна, что не то, что я хочу.

Взгляните на этот CodeSandbox, чтобы понять проблему

https://codesandbox.io/s/boring-buck-2fwm6?file= / src /App.js

Или проверьте код здесь: 

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>
  );
}

Вы можете видеть, что я показываю зону сброса, когда isDragActive равно true , но сразу же возвращается к false , потому что вновь отображаемая область покрывает родительский div (и, вероятно, отменяет событие перетаскивания).

Как обойти это? есть предложения?

1 Ответ

0 голосов
/ 17 апреля 2020

Я выяснил, чего не хватало, и это было глупо, как я и ожидал, вам нужно передать ref родительскому элементу, который определяет границы события перетаскивания. 

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

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

или если вы хочу придерживаться компонента пользовательского интерфейса материала: 

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

У меня сложилось впечатление, что он не требуется, и он будет назначен, если вы уничтожите {... rootProps} в родительском div.

...