react应用程序中未激发onDrop事件
在React应用程序中，未激发onDrop事件可能是由于以下几个原因：
- 未正确设置拖放相关属性：要使元素成为可拖放的目标，需要设置draggable属性为true。同时，还需要在目标元素上设置onDragOver事件，以便在拖动元素悬停在目标元素上时阻止默认行为。
- 未正确设置拖放事件处理程序：在目标元素上，需要设置onDrop事件处理程序来处理拖放操作。该处理程序将在拖动元素被释放时触发，并且可以在其中执行相应的操作。
- 未正确处理拖放数据：在拖动元素上，需要设置onDragStart事件处理程序来设置拖动数据。这些数据可以是文本、URL或自定义数据。在onDrop事件处理程序中，可以通过event.dataTransfer.getData()方法来获取拖动数据。
- 未正确设置拖放效果：在onDragOver事件处理程序中，可以通过event.preventDefault()方法来阻止默认的拖放效果。同时，还可以使用event.dataTransfer.dropEffect属性来设置拖放操作的效果，如"copy"、"move"或"link"。
综上所述，要解决react应用程序中未激发onDrop事件的问题，可以按照以下步骤进行操作：
- 确保目标元素设置了draggable属性为true，并且设置了onDragOver事件处理程序来阻止默认行为。
- 确保拖动元素设置了onDragStart事件处理程序来设置拖动数据。
- 确保目标元素设置了onDrop事件处理程序来处理拖放操作，并在其中执行相应的操作。
- 在onDragOver事件处理程序中，使用event.preventDefault()方法来阻止默认的拖放效果。
- 可以根据具体需求，使用event.dataTransfer.dropEffect属性来设置拖放操作的效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
相关·内容
0回答
react应用程序中未激发onDrop事件
javascript、reactjs、drag-and-drop
draggable='true' onDragStart={this.dragStartHandler(idx)}/><span onDragOver={this.preventDefault} onDropevent.preventDefault(); }但是，当我单击可拖动的图像，将其拖到拖放区域并释放鼠标按键时，drop事件永远不会被调用如何正确调用drop事件？
浏览 5提问于2018-07-17得票数 2
回答已采纳
1回答
已连接的React路由器-不更新视图
reactjs、react-redux、react-router、react-router-dom、connected-react-router
我需要一个建议...我正在学习如何基于react构建一个完整的应用程序。下面是测试应用程序：激发-Custon事件: onClick={() => redirectRequest('/')}在redux devtool：中也触发了-The路由器
浏览 2提问于2020-04-24得票数 0
2回答
React onChange事件未激发
javascript、reactjs-flux
问题是onChange事件不会在输入标记中触发。我之前使用LinkedStateMixin来跟踪输入值。最近，我想添加onChange事件来运行一些函数，然后删除了LinkedStateMixin，但onChange无法触发。我试图将e.stopPropagation()添加到setUsername()中，但它也不起作用。我尝试了其他事件，如onKeyDown、onClick等。他们都不能被解雇。有什么问题吗？var React = require('react</em
浏览 13提问于2016-07-30得票数 1
回答已采纳
1回答
react窗体事件未激发
javascript、reactjs、webpack
我在react中有一个简单的表单。同样的代码在net (w3学校)中也可以工作。但这对我的项目不起作用。事件不是为我而触发的。onChange事件未激发。我尝试更改为功能组件和其他方式，如使用this.bind..none绑定事件，其中一些方法有效。import React from 'react';
exp
浏览 11提问于2020-11-13得票数 0
1回答
几次之后，应用程序就会崩溃，在try...catch部分没有任何警告。下面是我的代码：
<!
浏览 0提问于2014-04-22得票数 0
1回答
如何创建带有填充属性dataTransfer的事件？
javascript、internet-explorer、events、simulate
在javascript代码中，事件"drop“被捕获并分析dataTransfer (e.dataTransfer.getData("Text"))的内容。在测试中，我用下一段代码模拟事件：这里创建了包含dataTransfer == null的事件。target.fireEvent("ondrop", event);
事件在javascrip
浏览 0提问于2013-04-23得票数 5
1回答
当子window.But子窗口事件中的光标焦点未激发时，在菜单项中激发快捷键事件。但是当使用子窗口中的快捷键时，我想激发子窗口按钮中的事件。
浏览 4提问于2012-02-04得票数 0
1回答
将JSON对象从子组件传递给父组件
json、reactjs
在一个简短的总结中，我已经实现了一个光电处理系统。我有一个div来显示上传的图像的预览。这个div位于我们称为parent.jsx的父组件中。在我们称为child.jsx的子组件中，我实现了一个上传系统。在child.jsx内部，我有以下代码：render: function() { <div>
//dropzone is essentially a file
浏览 0提问于2016-01-03得票数 1
回答已采纳
2回答
React redux ToDoList应用程序中未激发onClick事件
javascript、reactjs、redux、react-redux、dom-events
onClick事件根本不会触发。
浏览 0提问于2017-06-12得票数 1
1回答
在苹果iphone上，点击一个通知会捕捉到什么事件？
javascript、ios、reactjs、events、onpaste
我有一个React应用程序。我在苹果手机上测试。我的问题是，当我收到一条短信时，我会得到键盘上方的建议号码。当我点击它时，我需要在OTP输入框中填写该数字。那么在点击时触发的事件是什么呢？onPaste和onDrop事件不适用于on tap。
浏览 8提问于2019-10-30得票数 0
1回答
如何为数据容器实现“是否需要保存”机制？
c#、events、savechanges
在应用程序中，每个控件都绑定到人员列表，以便对其进行操作或更新。例如：一个包含人员姓名的列表框，一个更新所选人员年龄的控件等。这似乎很容易出错。有什么建议可以让它变得更好吗？
浏览 3提问于2011-08-28得票数 3
回答已采纳
1回答
未激发React本机NetInfo 'connectionChange‘事件
javascript、android、ios、reactjs、react-native
在RNRestAPI中，index.android.js和index.ios.js都是这样的；import {AppRegistry,} from 'react-native';
import Login from '.我基本上是在用户成功登录到我的应用程序后，尝试为我的应用程序创建导航。因此，我对我的代码做了以下修改。1)创建App.j
浏览 2提问于2017-09-25得票数 0
3回答
未激发UserControl加载事件
c#、winforms、events
我有WinForms应用程序。我的窗体派生类具有UserControl派生类。我只是将几个控件放在一个UserControl中，以简化重用。未激发UserControl的Load事件。
浏览 0提问于2010-02-08得票数 7
回答已采纳
2回答
使用现有函数inState的React挂钩
reactjs
我正在开发一个React组件，它使用拖放来上传基于本教程的文件：https://blog.logrocket.com/create-a-drag-and-drop-component-with-react-dropzone/，我对React Hooks组件类型不是很熟悉。在我的定制中，我希望在文件被拖放到该区域后隐藏拖放容器，而只显示文件容器。中设置状态onDrop={() => setIsDropped(!我的问题是如何将函数组合到我的状态
浏览 11提问于2020-08-21得票数 0
1回答
如何在React中从本地上传文件？
reactjs、filereader
我尝试使用Filereader应用程序接口，但在react中它需要一个Html5模块，而Filereader对应的npm模块不能正常工作，并且在文件上传后显示错误。对于npm模块，Filereader显示：“未捕获的错误:无法读取文件：{"preview":"blob:http%3A//dev.myntra.com%3A3000/cfb8a917-b3df-46b2或者有什么方法可以直接从react中使用Filereader API吗？这是我的代
浏览 0提问于2016-01-21得票数 1
1回答
在事件冒泡中选择每个动态内部div
jquery、drag-and-drop、event-bubbling
我有一个这样的静态HTML容器div：</div> <div class='drop'
浏览 5提问于2015-10-12得票数 1
1回答
如何在react-dropzone中的提交按钮上调用axios？
reactjs、react-dropzone
无法在提交按钮上添加onclick事件处理程序，在此代码中，我应该在何处声明调用axios或接受acceptedFiles变量的onClick事件函数。import React, {useCallback, Component} from 'react';importaxios from 'axios';
function Basic(
浏览 0提问于2019-07-28得票数 5
2回答
为什么"draggable = 'true'“不会在React呈现的组件上工作？
html、reactjs、draggable
我有一个React.Component： ondragend: function(e) {如果这与CSS规则有关，我已经尝试删除到Bootstrap的链接，并且尝试只呈现一个没有动态值的html表。我看不出这把小提琴里的代码是怎么回事：
通过在render函数中设置draggable=true来工
浏览 3提问于2015-04-10得票数 3
回答已采纳
2回答
未触发鼠标事件
c#、mouseevent、mousemove、mouseclick-event
我正在制作一个C# WinForms应用程序。由于某种原因，表单的MouseMove和MouseClick事件不会被触发。(当我找出原因时，我可能会觉得自己像个笨蛋。)
浏览 0提问于2012-02-11得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
