Javascript 修复了在Chrome中不工作的React-onDragExit和onDrop事件

我已经创建了一个div，以使我能够拖放文件。将文件拖到div上时，onDragEnterReact事件将毫无问题地触发

但是，当您从div中拖出时，onDragExit事件不会触发。此外，onDrop事件在您拖放文件时也不会触发，因此，即使您在onDrop处理程序中添加了e.preventDefault（），浏览器也会打开文件

我已经在互联网上搜索了修复程序，非修复程序似乎起了作用。其他人则声称这是Chrome e.t.c的一个缺陷

下面的代码是index.js中的代码。 您还可以检查完整的示例项目代码并在

import React，{Component}来自'React'；
从'react dom'导入{render}；
导入“/style.css”；
常量应用=（）=>{
常量handleOnDragEnter=（事件）=>{
控制台日志（“拖拽输入”）；
};
const handleOnDragExit=（事件）=>{
console.log（“拖动退出”）；
};
const handleOnDrop=（事件）=>{
event.preventDefault（）；
控制台日志（“删除”）；
};
返回(
拖放
)
}
render（，document.getElementById（'root'））；

对于不同的浏览器，这是一个奇怪的问题，您应该更改的一件事是将OnDragExit更改为OnDragLeave

如文件中给出的定义

另一件事是停止下载文件，我过去所做的是防止onDrop和onDragOver出现默认值

<div
    id="source"
    style={{ height: "100px", backgroundColor: "purple" }}
    onDragOver={handleOnDrop}
    onDrop={handleOnDrop}
    onDragEnter={handleOnDragEnter}
    onDragLeave={handleOnDragExit}
  ></div>

<div
    id="source"
    style={{ height: "100px", backgroundColor: "purple" }}
    onDragOver={handleOnDrop}
    onDrop={handleOnDrop}
    onDragEnter={handleOnDragEnter}
    onDragLeave={handleOnDragExit}
  ></div>