Question

以下是我尝试使用的示例代码，即react + TypeScript。 onDragEnter和onDragOver正常工作但不是 onDrop 事件。

import * as React from 'react';

export class FileZone extends React.Component {

  onDragOver = (e) => {
    let event = e as Event;
    event.stopPropagation();
  }

  onDragEnter = (e) => {
    let event = e as Event;
    event.stopPropagation();
  }

  onFileDrop = (e) => {
    let event = e as Event;
    event.stopPropagation();

    console.log("onFileDrop");
    alert("dropped")
  }

  render() {
    return (
      <div>
        onDragEnter={this.onDragEnter}
        onDragOver={this.onDragOver}
        onDrop={this.onFileDrop}>
        Drag and drop file here
      </div>)
  }
}

Answer 1

最后我遇到了问题，出于某些原因我必须像这样处理 onDragOver ：

onDragOver = (e) => {
let event = e as Event;
event.stopPropagation();
event.preventDefault();
}

这解决了我的问题。

Answer 2

只需阻止默认的ondragover事件，它就会起作用。

onDragOver = (event) => {
    event.preventDefault();
}

return (<div onDragOver={this.onDragOver} {...others}>{children}</div>);

Answer 3

您的代码中存在问题，您必须将事件分配给div

render() {
    return (
      <div //you have to remove additional > from here
        onDragEnter={this.onDragEnter}
        onDragOver={this.onDragOver}
        onDrop={this.onFileDrop}>
        Drag and drop file here
      </div>
    )
  }

Answer 4

onDrop={files => this.onFileDrop}>

这应该成为：

onDrop={this.onFileDrop}>

当你使用'this。'来调用函数时，你需要它在构造函数中：

constructor(props) {
    super(props);

    this.onFileDrop = this.onFileDrop.bind(this);
  }

功能：

onFileDrop(event) { 
 event.preventDefault(); 
 console.log("qwerty")
}

Answer 5

你需要调用函数来启动它（使用括号）：

render() {
    return (
      <div>
        onDragEnter={this.onDragEnter}
        onDragOver={() => { return false }}
        onDrop={files => this.onFileDrop()}> // you were missing the "()"
        Drag and drop file here
      </div>)
  }

Answer 6

window.ondragover = function(e) { e.preventDefault(); return false };
window.ondrop = function(e) { e.preventDefault(); return false };

Answer 7

默认情况下，浏览器会阻止“放置”操作，因此您需要阻止它们执行此操作！ event.preventDefault（）将按您提到的进行处理。

Answer 8

这是我工作的方式，可能是更好的方式。这可能会有一些我忽略的未知副作用，但是到目前为止，它似乎还可以正常工作。我正在App.js级别上执行此操作。

     useEffect(() => {
        const ondragover = window.ondragover;
        const ondrop = window.ondrop;
    
        window.ondragover = function (e) { e.preventDefault(); return false };
        window.ondrop = function (e) { e.preventDefault(); return false };
    
        return () => {
          window.ondragover = ondragover;
          window.ondrop = ondrop;
        }
      });

我在此答案https://stackoverflow.com/a/56034626/2031320中看到了这种技巧

React onDrop未触发

8 个答案: