Unable to get onDragStart Event on React for HTML5 Drag and Drop
Replace
onDragStart={this.dragStartHandler(event)}
to
onDragStart={this.dragStartHandler}
You should pass a function to onDragStart property, (as for any other events-related property like onClick, onMouseEnter etc.), not result of the function invocation as you did. React.js will pass the event object as an argument to the handler function "under the hood". However, you must remember, that React.js creates a wrapper around native JavaScript event. Its name "SyntheticEvent". See docs for details. But, you can get access to a native event in the handler function (see the code below):
var Draggable = React.createClass({ handleDrag(event) { console.log('react SyntheticEvent ==> ', event); console.log('nativeEvent ==> ', event.nativeEvent); //<- gets native JS event }, render: function() { return (<div draggable="true" onDragStart={this.handleDrag}> Open console and drag me! </div>); }});ReactDOM.render( <Draggable />, document.getElementById('container'));Look at this example in action - https://jsfiddle.net/yrhvw0L0/2/