修复 React onDragExit 和 onDrop 事件在 Chrome 中不起作用

Question

我创建了一个 div 使我能够拖放文件。当您将文件拖到 div 上时，onDragEnter React 事件会毫无问题地触发。

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

我在 Internet 上搜索了修复程序，但似乎都没有用。其他人声称是 Chrome e.t.c.

中的错误

下面的代码是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'));

Answer 1

这是不同浏览器的奇怪问题，您应该更改的一件事是将 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>

修复 React onDragExit 和 onDrop 事件在 Chrome 中不起作用

Fix For React onDragExit and onDrop Events Not Working In Chrome

javascript

drag-and-drop

dom-events

reactjs