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

Question

我创建了一个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'));

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>