React-Dropzone是否支持ondragend事件？若不支持该如何实现？

Hey there! Great question. Let’s break this down clearly:

首先：React-Dropzone确实没有直接暴露ondragend事件 #

React-Dropzone封装了原生的Mozilla DnD API，但它只对外提供了一组核心回调（比如onDrop, onDragEnter, onDragLeave, onDragOver等），ondragend不在默认暴露的列表里。这是因为在多数拖拽上传场景中，onDrop（成功放下文件）或onDragLeave（拖拽离开容器）已经能覆盖常见需求，但如果你需要在**拖拽动作完全结束（无论是否成功上传）**时执行逻辑（比如关闭模态框、重置UI状态），我们可以手动添加这个事件。

实现方法：扩展getRootProps添加自定义onDragEnd #

React-Dropzone的useDropzone钩子返回的getRootProps()方法，会生成拖拽容器所需的基础props（包括原生DnD事件绑定）。我们可以扩展这个对象，手动加入onDragEnd回调，不会和组件原有逻辑冲突。

这里有一个完整的示例代码：

import { useDropzone } from 'react-dropzone';

function DragAndDropModal() {
  // 初始化Dropzone核心配置
  const { getRootProps, getInputProps } = useDropzone({
    onDrop: (acceptedFiles) => {
      // 这里处理文件上传逻辑
      console.log('Files dropped:', acceptedFiles);
    }
  });

  // 自定义ondragend处理函数
  const handleDragEnd = (e) => {
    // 比如：拖拽结束后关闭模态框、重置拖拽状态等
    console.log('Drag operation completed:', e);
    // 假设你有一个关闭模态框的state
    // setIsModalOpen(false);
  };

  // 扩展根元素props，加入onDragEnd
  const dropzoneRootProps = {
    ...getRootProps(),
    onDragEnd: handleDragEnd
  };

  return (
    <div {...dropzoneRootProps} className="modal-dropzone">
      <input {...getInputProps()} />
      <p>拖拽文件到此处，或点击选择文件</p>
    </div>
  );
}

额外说明 #

这种方法完全兼容原生DnD API的ondragend事件，你可以在handleDragEnd函数中访问完整的事件对象e，获取拖拽相关的所有信息。如果你的模态框有特殊的交互逻辑（比如拖拽结束后无论成功与否都关闭），这个方案能完美满足需求。

内容的提问来源于stack exchange，提问作者Akash Purandare