无法在React上获取HTML5拖放的onDragStart事件

Question

我正在ReactJs中创建一个基本应用程序，以实现基本的HTML5拖放功能。我面临的问题是，我的onDragStart事件没有将事件对象传递给处理程序方法。我已经参考了HTML5 Drag and Drop的文档，其中展示了如何将事件对象传递给处理程序。

这是我的代码，用于为onDragStart事件实现事件处理程序。

//handler method
dragStartHandler(event) {
 console.log(event); // undefined
}

render() {
 return (
   <div draggable="true" 
    onDragStart={this.dragStartHandler(event)}></div>
 )
}

正在调用处理程序，但没有事件对象。我的日程安排是捕获事件对象，以便我可以使用DataTransfer接口进一步将数据绑定到事件。

请帮助我了解行为。

谢谢！

更新资料

不将事件传递给dragStartHandler方法实际上是将事件传递给处理程序方法。与HTML5 DND文档中提到的方法不同，它是React绑定方法的唯一方式，似乎不适用于react。我在处理程序中得到的事件是根据html规范包装的原始Drag Event版本。这种行为使我感到困惑，因为它给出了一些Proxy对象，可能是由react创建的。

解决方案：尽管Proxy对象具有原始Drag事件的所有方法，但我后来才意识到。因此，您可以像以前一样将新的Proxy事件对象用作本机html元素，并具有所有以前的行为。

Answer 1

更换

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 (<div draggable="true" onDragStart={this.handleDrag}>
                Open console and drag me!
            </div>);
  }
});

ReactDOM.render(
  <Draggable />,
  document.getElementById('container')
);

看看这个例子-https: //jsfiddle.net/yrhvw0L0/2/