html - 无法在 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 进一步将数据绑定(bind)到事件。界面。

请帮助我理解这种行为。

谢谢!

Update

不将事件传递给 dragStartHandler 方法实际上将事件传递给处理程序方法。与 HTML5 DND 文档中提到的不同，它只是 react 绑定(bind)方法的方式，似乎不适用于 react 。我在处理程序中得到的事件是原始 Drag 的包装版本 Event根据 html 规范。这种行为让我感到困惑，因为它给了一些 Proxy对象可能是由 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.

Answer 1

替换

onDragStart={this.dragStartHandler(event)}

到

onDragStart={this.dragStartHandler}

您应该将函数传递给 onDragStart 属性，(对于任何其他与事件相关的属性，如 onClick、onMouseEnter 等)，不像你那样是函数调用的结果。 React.js 会将事件对象作为参数传递给“幕后”处理函数。但是，您必须记住，React.js 创建了一个围绕原生 JavaScript 事件的包装器。它的名字是“SyntheticEvent”。参见 docs了解详情。但是，您可以在处理函数中访问 native 事件(请参阅下面的代码):

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/