文件拖放区域

渲染一个用于单个文件的文件拖放组件。

• 创建一个名为 dropRef 的引用，并将其绑定到组件的包装器上。
• 使用 useState() 钩子创建 drag 和 filename 变量。将它们分别初始化为 false 和 ''。
• 变量 dragCounter 和 drag 用于确定是否正在拖动文件，而 filename 用于存储被拖放文件的名称。
• 创建 handleDrag、handleDragIn、handleDragOut 和 handleDrop 方法来处理拖放功能。
• handleDrag 阻止浏览器打开拖动的文件。handleDragIn 和 handleDragOut 处理拖动的文件进入和离开组件。handleDrop 处理文件被放下并将其传递给 onDrop。
• 使用 useEffect() 钩子使用先前创建的方法来处理每个拖放事件。

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

const FileDrop = ({ onDrop }) => {
  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);
  };

```javascript
const handleDrop = e => {
  e.preventDefault();
  e.stopPropagation();
  setDrag(false);
  if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
    onDrop(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 () => {
    div.removeEventListener('dragenter', handleDragIn);
    div.removeEventListener('dragleave', handleDragOut);
    div.removeEventListener('dragover', handleDrag);
    div.removeEventListener('drop', handleDrop);
  };
});

return (
  <div
    ref={dropRef}
    className={
      drag ? 'filedrop drag' : filename ? 'filedrop ready' : 'filedrop'
    }
  >
    {filename && !drag ? <div>{filename}</div> : <div>将文件拖放到此处！</div>}
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(
  <FileDrop onDrop={console.log} />
);