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

Posted 2023-05-08

【中文标题】无法在 React 上为 HTML5 拖放获取 onDragStart 事件

【英文标题】：Unable to get onDragStart Event on React for HTML5 Drag and Drop

【发布时间】：2017-12-18 04:31:15

【问题描述】：

我正在 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 元素所做的那样，所有之前的 行为。

【参考方案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/

【讨论】：

嘿@Mikhail，你看过我提到的Html5拖放文档吗？如果你能看到，它已经传递了事件对象。您提到的解决方案已经尝试过了。它不工作

@Prabodh M 我添加了 jsfiddle 的链接。看看它是如何工作的。然后你写onDragStart=this.dragStartHandler(event)你立即调用，每次触发“render”方法。您应该传递函数，react js 会将事件对象作为参数传递给“幕后”函数。

@PrabodhM - 您可能也遇到了this 问题。要么使用箭头函数，要么在构造函数中绑定处理程序等。例如元素属性 onDragStart=this.dragStartHandler.bind(this)></div> 和定义为 dragStartHandler = (event) => ... 的函数。或绑定在构造函数中。但是@Mikhail 是对的，你想传递一个函数，而不是函数的调用（除非调用返回一个函数，但这里可能不是这种情况）

谢谢@MikhailShabrikov。我已经有了那个代理对象，但无法弄清楚它是原始 html5 拖动事件的包装器！

@MikhailShabrikov：哇哦，这就是我需要的兄弟，非常感谢！你能用细节更新答案吗，对像我这样的新手会有帮助。谢谢！