反应应用程序中未触发 onDrop 事件答案

【问题标题】：onDrop event not fired in react app反应应用程序中未触发 onDrop 事件
【发布时间】：2018-07-17 15:36:12
【问题描述】：

我想像这样从一个图像拖动到一个跨度：

从这里拖动

<img src={img_src} draggable='true' onDragStart={this.dragStartHandler(idx)}/>

放在这里：

<span onDragOver={this.preventDefault} onDrop={this.dropHandler} 
    onClick={this.handleClick}>DROP HERE</span>

拖放处理程序：

  dragStartHandler = (idx) => (event) => {
    console.log(idx,"called drag event and loaded data in drag object")
    event.dataTransfer.setData('text', idx); 
  }

  dropHandler = () => (event) => {
    event.preventDefault();
    console.log("DROP EVENT")
  }

  preventDefault = () => (event) => {
    event.preventDefault();
    console.log("prevent default")
  }

这里有一段代码：https://jsfiddle.net/69z2wepo/229855/

但是当我单击可拖动图像时，从不调用 drop 事件，将其拖到放置区域并释放鼠标按钮。这是在 chrome、firefox 和 safari 上。

如何正确调用 drop 事件？

【问题讨论】：

你能在 fiddler 中做到这一点吗？
是的，我为我的问题添加了一个小提琴。任何想法我做错了什么？
所以我看了一下我不久前使用React 并使用拖放实现的程序。我最终创建了一个文件并在纯 JS 中实现了 DnD 的所有内容。我刚刚调用了脚本并将ComponentDidMount 中的所有事件附加到DOM 元素。我似乎无法弄清楚为什么它不起作用，也许是我们错过了一些微妙的东西。

标签： javascript reactjs drag-and-drop

【解决方案1】：

解决办法：

改变

onDragOver={this.preventDefault}

到

onDragOver={this.preventDefault()}

如果您使用的是 ES6。回归基础永远不会有害:-)

【讨论】：