React 30 秒速學：製做文件拖放組件

本文譯自：30-seconds-of-react 。 React 30 秒速學： 精選有用的 React 片斷，30-seconds-of-react 的中文版本，已所有完成翻譯、上線，地址：30-seconds-of-react-zh_CN-umi 。

系列文章：

• React 30 秒速學：把數組數據渲染爲列表、表格
• React 30 秒速學：製做輸入框、密碼可見、滑塊組件、下拉選擇器、複選框組件
• React 30 秒速學：製做多行文本組件，限制字符數和單詞數
• React 30 秒速學： 實現可摺疊、無限層級的樹形組件
• React 30 秒速學：製做自動識別連接的文本組件
• React 30 秒速學：製做手風琴組件
• React 30 秒速學：製做輪播組件
• React 30 秒速學：製做摺疊面板組件
• React 30 秒速學：製做倒計時組件
• React 30 秒速學：製做文件拖放組件
• React 30 秒速學：製做模態框組件
• React 30 秒速學：製做星級評分組件
• React 30 秒速學：製做選項卡組件

文件拖放組件

• 爲此組件建立一個名爲dropRef的引用。
• 使用React.useState()鉤子來建立drag和filename變量，分別初始化爲false和空字符串。變量dragCounter和drag用於肯定是否正在拖動文件，而filename用於存儲被刪除文件的名稱。
• 建立handleDrag，handleDragIn，handleDragOut和handleDrop方法來處理拖放功能，將它們綁定到組件的上下文。
• 每一個方法都將處理一個特定的事件，在React.useEffect()鉤子及其附加的cleanup()方法中建立和刪除它的監聽器。
• handleDrag阻止瀏覽器打開拖動的文件，handleDragIn和handleDragOut處理進入和退出組件的拖動文件，而handleDrop處理被刪除的文件並將其傳遞給props.handleDrop。
• 返回一個適當樣式的<div>並使用drag和filename來肯定其內容和樣式。
• 最後，將建立的<div>的ref綁定到dropRef。

.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;
}
複製代碼

import React from "react";
import styles from "./FileDrop.css";
function FileDrop(props) {
  const [drag, setDrag] = React.useState(false);
  const [filename, setFilename] = React.useState("");

  // 建立組件引用
  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(() => {
    // 監聽拖放事件
    let div = dropRef.current;
    div.addEventListener("dragenter", handleDragIn);
    div.addEventListener("dragleave", handleDragOut);
    div.addEventListener("dragover", handleDrag);
    div.addEventListener("drop", handleDrop);
    // 銷燬時移除事件
    return function cleanup() {
      div.removeEventListener("dragenter", handleDragIn);
      div.removeEventListener("dragleave", handleDragOut);
      div.removeEventListener("dragover", handleDrag);
      div.removeEventListener("drop", handleDrop);
    };
  });

  return (
    <div // ref 引用 ref={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>
  );
}
複製代碼

例子

export default function() {
  return <FileDrop handleDrop={console.log} />; } 複製代碼

• 示例代碼
• 運行效果