Reactjs 反应器未点火

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

import*as React from'React'；
导出类FileZone扩展React.Component{
onDragOver=（e）=>{
设event=e为event；
event.stopPropagation（）；
}
onDragEnter=（e）=>{
设event=e为event；
event.stopPropagation（）；
}
onFileDrop=（e）=>{
设event=e为event；
event.stopPropagation（）；
console.log（“onFileDrop”）；
警报（“已删除”）
}
render（）{
返回(
将文件拖放到此处
)
}
}

这个,应该变成这个,

onDrop={this.onFileDrop}>

当您使用“this”时，要调用函数，您需要它位于构造函数中：

constructor(props) {
    super(props);

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

功能：

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

---

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

render（）{
返回(
onDragEnter={this.onDragEnter}
onDragOver={（）=>{return false}}
onDrop={files=>this.onFileDrop（）}>//您缺少了“（）”
将文件拖放到此处
)
}

您的代码中有一个问题，您必须将事件分配给

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

render（）{
返回(
从这里
onDragEnter={this.onDragEnter}
onDragOver={this.onDragOver}
onDrop={this.onFileDrop}>
将文件拖放到此处
)
}

最后我遇到了问题，出于某种原因，我不得不像这样处理onDragOver：

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

---

这就解决了我的问题。

只需阻止默认ondragover事件，它就可以工作了

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

---

return（{children}）；

浏览器默认情况下会阻止“删除”操作，因此您需要阻止它们这样做！event.preventDefault（）将按照您所提到的方式处理该操作。

使用相同的方法更新了上述代码，但没有运气，顺便问一下，我使用的是TypeScriptOnFileDrop函数中有什么？您有

onFileDrop（事件）吗{event.preventDefault（）；console.log（“qwerty”）}

？也有同样的问题，这解决了问题。我不知道，但这看起来像react中的一个bug。对于本机事件，不需要做这样的事情。react中不是bug，而是拖放事件的工作方式。的默认操作是“将当前拖动操作重置为无”"。因此，除非您取消该操作，否则删除将不起作用。请查看更多信息。他们的示例包括这一点。奇怪的行为。这也解决了我的问题。Thx！这不是在React中执行此操作的方法。在React中，如果在函数名后打开和关闭括号，它的调用次数将比您预期的要多。相反，您应该传递一个对它的引用，要做到这一点，您需要在不带括号的情况下编写它。

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

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

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

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