作者:许桂欢_173 | 来源:互联网 | 2023-01-29 17:52
我正在ReactJs中创建一个基本应用程序,以实现基本的HTML5拖放功能。我面临的问题是,我的onDragStart
事件没有将事件对象传递给处理程序方法。我已经参考了HTML5 Drag and Drop的文档,其中展示了如何将事件对象传递给处理程序。
这是我的代码,用于为onDragStart
事件实现事件处理程序。
//handler method
dragStartHandler(event) {
console.log(event); // undefined
}
render() {
return (
)
}
正在调用处理程序,但没有事件对象。我的日程安排是捕获事件对象,以便我可以使用DataTransfer接口进一步将数据绑定到事件。
请帮助我了解行为。
谢谢!
更新资料
不将事件传递给dragStartHandler
方法实际上是将事件传递给处理程序方法。与HTML5 DND文档中提到的方法不同,它是React绑定方法的唯一方式,似乎不适用于react。我在处理程序中得到的事件是根据html规范包装的原始Drag Event版本。这种行为使我感到困惑,因为它给出了一些Proxy对象,可能是由react创建的。
解决方案:尽管Proxy对象具有原始Drag事件的所有方法,但我后来才意识到。因此,您可以像以前一样将新的Proxy事件对象用作本机html元素,并具有所有以前的行为。
Mikhail Shab..
6
更换
OnDragStart={this.dragStartHandler(event)}
至
OnDragStart={this.dragStartHandler}
您应该将一个函数传递给onDragStart
属性(对于其他与事件相关的其他属性,例如onClick
,onMouseEnter
等等),而不是像过去那样调用函数。React.js会将事件对象作为参数传递给处理程序函数“幕后”。但是,您必须记住,React.js围绕本机Javascript事件创建了包装器。它的名称为“ SyntheticEvent”。有关详细信息,请参阅文档。但是,您可以在处理函数中访问本机事件(请参见下面的代码):
var Draggable = React.createClass({
handleDrag(event) {
console.log('react SyntheticEvent ==> ', event);
console.log('nativeEvent ==> ', event.nativeEvent); //<- gets native JS event
},
render: function() {
return (
Open console and drag me!
);
}
});
ReactDOM.render(
,
document.getElementById('container')
);
看看这个例子-https: //jsfiddle.net/yrhvw0L0/2/
1> Mikhail Shab..:
更换
OnDragStart={this.dragStartHandler(event)}
至
OnDragStart={this.dragStartHandler}
您应该将一个函数传递给onDragStart
属性(对于其他与事件相关的其他属性,例如onClick
,onMouseEnter
等等),而不是像过去那样调用函数。React.js会将事件对象作为参数传递给处理程序函数“幕后”。但是,您必须记住,React.js围绕本机Javascript事件创建了包装器。它的名称为“ SyntheticEvent”。有关详细信息,请参阅文档。但是,您可以在处理函数中访问本机事件(请参见下面的代码):
var Draggable = React.createClass({
handleDrag(event) {
console.log('react SyntheticEvent ==> ', event);
console.log('nativeEvent ==> ', event.nativeEvent); //<- gets native JS event
},
render: function() {
return (
Open console and drag me!
);
}
});
ReactDOM.render(
,
document.getElementById('container')
);
看看这个例子-https: //jsfiddle.net/yrhvw0L0/2/