30-seconds-of-react React 30 seconds of React 30 seconds of React 30 seconds of React 30 seconds of React 30 seconds of React

Series of articles:

  • React 30 seconds: Render array data into lists and tables
  • React 30 Seconds learning: Make input fields, password visibility, slider components, drop-down selectors, check box components
  • React 30 seconds: Create multi-line text components that limit the number of characters and words
  • React 30 seconds Speed learning: Implement collapsible, infinite hierarchy tree components
  • React 30 Seconds: Make text components that automatically recognize links
  • React 30 Seconds To Learn: Make accordion components
  • React 30 Seconds Learning: Create a multicast component
  • React 30 Seconds Quick Learning: Make folding panel components
  • React 30 Seconds: Create a countdown component
  • React 30 seconds Quick Learning: Create file drag and drop components
  • React 30 Seconds Speed Learning: Make modal box components
  • React 30 Seconds Learning: Create a star rating component
  • React 30 Seconds Learning: Make TAB components

File drag and drop component

  • Create a name for this componentdropRefThe reference.
  • useReact.useState()Hook to createdragandfilenameVariables, respectively, initialized tofalseAnd an empty string. variabledragCounteranddragUsed to determine whether a file is being dragged, andfilenameThe name used to store the deleted file.
  • createhandleDrag.handleDragIn.handleDragOutandhandleDropMethod to handle drag-and-drop functions and bind them to the context of the component.
  • Each method will handle a specific event inReact.useEffect()Hooks and their attachmentscleanup()Method to create and delete its listeners.
  • handleDragPrevents the browser from opening the dragged file,handleDragInandhandleDragOutHandles dragging files into and out of components, whilehandleDropProcess deleted files and pass them toprops.handleDrop.
  • Returns an appropriately styled<div>And usedragandfilenameTo determine its content and style.
  • Finally, will create<div>therefBound to thedropRef.
.filedrop {
  min-height: 120px;
  border: 3px solid #d3d3d3;
  text-align: center;
  font-size: 24px;
  padding: 32px;
  border-radius: 4px;
}

.filedrop.drag {
  border: 3px dashed #1e90ff;
}

.filedrop.ready {
  border: 3px solid #32cd32;
}
Copy the code
import React from "react";
import styles from "./FileDrop.css";
function FileDrop(props) {
  const [drag, setDrag] = React.useState(false);
  const [filename, setFilename] = React.useState("");

  // Create a component reference
  let dropRef = React.createRef();
  let dragCounter = 0;

  const handleDrag = e= > {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDragIn = e= > {
    e.preventDefault();
    e.stopPropagation();
    dragCounter++;
    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);
  };

  const handleDragOut = e= > {
    e.preventDefault();
    e.stopPropagation();
    dragCounter--;
    if (dragCounter === 0) setDrag(false);
  };

  const handleDrop = e= > {
    e.preventDefault();
    e.stopPropagation();
    setDrag(false);
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      props.handleDrop(e.dataTransfer.files[0]);
      setFilename(e.dataTransfer.files[0].name);
      e.dataTransfer.clearData();
      dragCounter = 0; }}; React.useEffect((a)= > {
    // Listen for drag-and-drop events
    let div = dropRef.current;
    div.addEventListener("dragenter", handleDragIn);
    div.addEventListener("dragleave", handleDragOut);
    div.addEventListener("dragover", handleDrag);
    div.addEventListener("drop", handleDrop);
    // Remove events while destroying
    return function cleanup() {
      div.removeEventListener("dragenter", handleDragIn);
      div.removeEventListener("dragleave", handleDragOut);
      div.removeEventListener("dragover", handleDrag);
      div.removeEventListener("drop", handleDrop);
    };
  });

  return (
    <div
      // refreferenceref={dropRef}
      className={
        drag? ` ${styles.filedrop} ${styles.drag} `: filename? ` ${styles.filedrop} ${styles.ready} `: styles.filedrop
      }
    >{filename && ! drag ?<div>{filename}</div> : <div>Drop files here!</div>}
    </div>
  );
}
Copy the code

example

export default function() {
  return <FileDrop handleDrop={console.log} />;
}
Copy the code
  • The sample code
  • Running effect