下面是我尝试使用的示例代码,即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>)
}
}
7条答案
按热度按时间kgsdhlau1#
您必须像这样
preventDefault()
**dragover
**事件的行为:阻止
dragover
事件中的默认行为“表明元素是可拖动位置”,如MDN文档中所示,here和here。然后drop
事件将工作。0md85ypi2#
简单地防止默认ondragover事件,然后它的工作。
6bc51xsx3#
您的代码中有一个问题,您必须将事件分配给
div
liwlm1x94#
goucqfw65#
浏览器默认情况下会阻止“drop”动作,所以你需要阻止他们这样做!event.preventDefault()会像你提到的那样处理它。
wf82jlnq6#
这个,应该变成这样:
当你使用“this.”来调用函数时,你需要它在构造函数中:
功能:
jc3wubiy7#
你需要调用函数来启动它(使用括号):