React中使用e.dataTransfer实现文件拖拽时文件列表长度为0

问题根源 #

• dragEnter阶段拿不到文件数据：浏览器在拖拽进入（dragEnter）阶段不会传递文件列表，只有在完成放置（drop）时，e.dataTransfer.files才会包含文件信息，你在dragEnter里打印自然是空的。
• 未处理dragover事件：浏览器默认会拦截drop行为，必须给拖拽区域添加dragover事件处理，手动阻止默认行为，才能让drop事件正常触发。
• 事件绑定方式混乱：同时用ref绑定drop事件和React组件属性，容易造成逻辑混淆，统一用React的事件属性更符合组件开发规范。

修复后的代码 #

export default function App() {
  // 处理drop事件，此处才能正确获取文件列表
  const handleImageDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    console.log(e.dataTransfer.files);
  };

  const handleImageDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    // dragEnter阶段无文件数据，无需尝试获取
  };

  const handleImageDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    // 必须阻止默认行为，否则drop事件无法触发
  };

  const handleImageDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleImageDnd = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    e.stopPropagation();
    console.log(e.target.files);
  };

  return (
    <div>
      <div
        onDragEnter={handleImageDragEnter}
        onDragOver={handleImageDragOver}
        onDragLeave={handleImageDragLeave}
        onDrop={handleImageDrop}
        style={{ width: '360px', height: '360px', border: '2px solid black' }}
      ></div>
      <form>
        <input type="file" accept="image/*" onChange={handleImageDnd} />
        <input type="submit" value="Upload Image" />
      </form>
    </div>
  );
}

关键修改说明 #

• 新增handleImageDragOver函数并绑定到onDragOver属性，通过阻止默认行为确保drop事件能正常触发。
• 改用React的onDrop属性处理放置事件，移除ref绑定的事件逻辑，代码结构更统一清晰。
• 移除dragEnter中打印文件列表的逻辑，该阶段本身无法获取文件数据。

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