reactjs - React onDrop is not firing
问题描述
Below is the sample code which I'm trying to use, which is react + TypeScript. onDragEnter and onDragOver are working properly but not the onDrop event.
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>)
}
}
解决方案
最后我得到了这个问题,出于某种原因,我必须像这样处理onDragOver:
onDragOver = (e) => {
let event = e as Event;
event.stopPropagation();
event.preventDefault();
}
这解决了我的问题。
推荐阅读
- ruby - ruby 从另一个文件导入数据
- python - 如何在python的n维矩阵/数组中获取任何随机列表值?
- azure - 如何使用 spring-data-cosmosdb 为 CosmosDB 中的整个数据库设置吞吐量(RU)?
- api - 尝试在Vuejs中通过xhr调用api,使用promise存储响应,不识别.then()
- node.js - DynamoDB NewImage 流不返回所有字段
- c - 对数字字符串使用 strcmp() 感到困惑
- python - 无法使用 smtplib 向我的电子邮件发送附件
- java - 具有 python 和 java 语言支持的 AWS lambda
- r - 使用 R 模拟马尔可夫链
- sql - 我将如何使用餐桌,然后只退回出现 3 次或更多的物品?