React应用中的onDrop事件未触发

Question

我想要像这样从图片拖动到一个span元素中：

从这里开始拖动

<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")
  }

这里有一个带有代码的jsfiddle链接：https://jsfiddle.net/69z2wepo/229855/

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

如何正确调用drop事件？

- user2212461

---

你能在 Fiddler 中做到这个吗？ - Train

是的，我在我的问题中添加了一个fiddle。你有什么想法我做错了什么吗？ - user2212461

所以我看了一下之前用React和拖放实现的程序。最终我创建了一个文件，并使用纯JS实现了所有的DnD功能。我只需调用脚本并在ComponentDidMount中将所有事件附加到DOM元素上。我似乎无法弄清楚为什么它不起作用，也许是我们忽略了一些微妙的东西。 - Train

Answer 1

解决方案：

更改

onDragOver={this.preventDefault}

to

onDragOver={this.preventDefault()}

如果你正在使用ES6，回归基础并不会有什么坏处 :-)

- user2212461

---

同样适用于FC。例如：onDragOver={(e) => e.preventDefault()}。 - Gogol