反应 onDrop 没有触发答案

【问题标题】：React onDrop is not firing反应 onDrop 没有触发
【发布时间】：2018-10-18 04:40:53
【问题描述】：

下面是我尝试使用的示例代码，即 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>)
  }
}

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

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")
}

【讨论】：

用相同的方式更新了上面的代码，但没有运气，顺便说一下我正在使用打字稿
你的 onFileDrop 函数中有什么？你有onFileDrop(event) { event.preventDefault(); console.log("qwerty")} 吗？

【解决方案2】：

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

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

【讨论】：

在反应中，如果您在函数名称后打开和关闭括号，它将被调用的次数比您预期的要多得多。相反，您应该传递对它的引用，并在不带括号的情况下编写它。

【解决方案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>
    )
  }

【讨论】：

【解决方案4】：

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

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

这解决了我的问题。

【讨论】：

遇到了同样的问题，这解决了问题。我不知道，但这看起来像是反应中的一个错误。对于原生事件，无需执行此类操作。
这不是 React 中的错误，而是拖放事件的工作方式。 dragOver 的默认操作是“将当前拖动操作重置为无”。所以除非你取消它，否则下降不起作用。查看MDN 了解更多信息。他们的例子包括了这一点。
奇怪的行为。这也解决了我的问题。谢谢！

【解决方案5】：

只需阻止默认的 ondragover 事件就可以了。

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

这不是 React 中的做法。

【解决方案7】：

浏览器默认阻止“drop”操作，所以你需要阻止他们这样做！ event.preventDefault() 将按照您提到的方式处理它。

【讨论】：