gpt4 book ai didi

javascript - 修复 React onDragExit 和 onDrop 事件在 Chrome 中不起作用的问题

转载 作者:行者123 更新时间:2023-12-02 21:25:38 46 4
gpt4 key购买 nike

我创建了一个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/

46 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com