我创建了一个div,使我能够拖放文件。当您将文件拖动到 div 上时,onDragEnter React 事件会毫无问题地触发。
但是,当您拖出 div 时,onDragExit 事件不会触发。此外,当您放置文件时,onDrop 事件不会触发,因此即使您在 onDrop 处理程序中添加 e.preventDefault() ,浏览器也会打开该文件。
我在互联网上搜索了修复方法,但似乎不起作用。其他人声称这是 Chrome 等中的错误。
下面的代码是index.js中的代码。 您还可以查看完整的示例项目代码并在 Stackblitz 上进行编辑:https://stackblitz.com/edit/react-fnkaqk?file=index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
const App = () => {
const handleOnDragEnter = (event) => {
console.log("draged enter");
};
const handleOnDragExit = (event) => {
console.log("drag exit");
};
const handleOnDrop = (event) => {
event.preventDefault();
console.log("droped");
};
return (
<>
<h1>Drag File And Drop</h1>
<div style={{height: "100px", backgroundColor: "purple"}} onDrop={handleOnDrop} onDragEnter={handleOnDragEnter} onDragExit={handleOnDragExit}></div>
</>
)
}
render(<App />, document.getElementById('root'));
最佳答案
对于不同的浏览器来说,这是一个奇怪的问题,您应该更改的一件事是将 OnDragExit 更改为 OnDragLeave
如文档中给出的定义
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
另一件事是阻止拖放下载文件,我过去所做的是防止 onDrop 和 onDragOver 上的默认设置
<div
id="source"
style={{ height: "100px", backgroundColor: "purple" }}
onDragOver={handleOnDrop}
onDrop={handleOnDrop}
onDragEnter={handleOnDragEnter}
onDragLeave={handleOnDragExit}
></div>
关于javascript - 修复 React onDragExit 和 onDrop 事件在 Chrome 中不起作用的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60747422/