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

Question

我正在 ReactJs 中创建一个基本应用程序来实现基本的 HTML5 拖放功能。我面临的问题是，我的 onDragStart 事件没有将事件对象传递给处理程序方法。我提到了documentation of 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 对象可能是由反应创建的。

解决方案：虽然Proxy对象拥有原来的所有方法 拖动事件，我后来才意识到。所以你可以使用新的代理事件 对象，就像您之前作为原生 html 元素所做的那样，所有之前的 行为。

Answer 1

替换

onDragStart={this.dragStartHandler(event)}

到

onDragStart={this.dragStartHandler}

您应该将函数传递给onDragStart 属性，（对于任何其他与事件相关的属性，如onClick、onMouseEnter 等），而不是像您所做的函数调用的结果。 React.js 会将事件对象作为参数传递给“幕后”的处理函数。但是，您必须记住，React.js 创建了一个围绕原生 JavaScript 事件的包装器。它的名字是“合成事件”。有关详细信息，请参阅docs。但是，您可以在处理函数中访问本机事件（参见下面的代码）：

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/