Исправление событий ReDact onDragExit и onDrop, не работающих в Chrome - PullRequest
Новая
       20

Исправление событий ReDact onDragExit и onDrop, не работающих в Chrome

0 голосов
/ 19 марта 2020

Я создал div , чтобы я мог перетаскивать файлы . Когда вы перетаскиваете файл через div, событие onDragEnter React срабатывает без проблем.

Однако onDragExit Событие не запускается при перетаскивании из div. Также событие onDrop не запускается при удалении файла, поэтому браузер открывает файл, даже если вы добавили e.preventDefault () в обработчик onDrop.

Я искал по inte rnet исправления, и, похоже, не работает. Другие утверждают, что это ошибка в Chrome et c.

Код ниже является кодом в индексе. 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'));

1 Ответ

1 голос
/ 19 марта 2020

Это странная проблема с различными браузерами, одну вещь, которую вы должны изменить, это изменить 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>
...