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。我在处理程序中获得的事件是根据html规范包装的原始Drag Event的版本。这种行为让我困惑，因为它可能会通过反应创建一些Proxy对象。

解决方案：虽然Proxy对象具有原始的所有方法拖动事件，我后来意识到了。所以你可以使用新的Proxy事件像以前作为原生html元素所做的对象，以及之前的所有对象行为。

Answer 1

替换

onDragStart={this.dragStartHandler(event)}

到

onDragStart={this.dragStartHandler}

您应该将函数传递给onDragStart属性（对于任何其他与事件相关的属性，如onClick，onMouseEnter等），而不是像您所做的那样调用函数的结果。 React.js将事件对象作为参数传递给处理函数＆＃34;引擎盖＆＃34;。但是，您必须记住，React.js会在本机JavaScript事件周围创建一个包装器。它的名字＆＃34; SyntheticEvent＆＃34;。有关详细信息，请参阅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/

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

1 个答案: