I am creating a basic application in ReactJs to implement the basic HTML5 Drag and Drop functionality. The issue I am facing is, my onDragStart event is not passing the event object to the handler method. I have referred the documentation of HTML5 Drag and Drop, where it has shown how event object is passed to handler.
This is my code to implement the event Handler for onDragStart event.
//handler method
dragStartHandler(event) {
console.log(event); // undefined
}
render() {
return (
<div draggable="true"
onDragStart={this.dragStartHandler(event)}></div>
)
}
The handler is getting called but without the event object. My agenda is to capture the event object so that I can proceed further to bind data to the event, using the DataTransfer interface.
Please help me understand the behavior.
Thanks!
Update
Not passing the event to the dragStartHandler method actually passes the event to the handler method. Its just the way react works to bind a method, unlike what is mentioned in the HTML5 DND documentation, seem not to work with react. The event which I got in the handler was wrapped up version of original Drag Event as per html specs. This behavior just confused me as it was giving some Proxy object might be created by react.
Solution : Although the Proxy object has all the methods of original Drag event, I realized it later. So you can use the new Proxy event object as you did previously as native html element, with all previous behavior.