反应onDrop没有开火

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