如何防止在反应应用程序中拖放图像？答案

【问题标题】：How can I prevent drag and drop images in a react app?如何防止在反应应用程序中拖放图像？
【发布时间】：2018-09-28 15:20:28
【问题描述】：

我们得到了how to prevent drag drop image with jquery 和$('img').on('dragstart', function(event) { event.preventDefault(); });，但我想在一个react 应用程序中实现同样的效果，并且没有jquery。我怎样才能做到这一点？ a) 本地（每个图像的图像） b) 全局（对于 react 应用的所有图像）

我仍然想控制其他交互，所以img { pointer-events: none; } 不是解决方案。

目标是防止通过拖放保存图像。

【问题讨论】：

@ArmanCharan 是的，它 (draggable="false") 适用于 onClick={} 正在执行某些操作的图像，但对于其他图像，当我直接执行此操作时它有效，但是当我单击一次，图像被选中，然后我可以未知原因拖动它。
正如@ArmanCharan 所提到的，添加一个可拖动的属性是有效的，你可以在这里看到：codesandbox.io/s/4r6p4jyko4 但如果你能向我们展示你到目前为止所做的尝试，那将会非常有帮助。如果我误解了这个问题，我们深表歉意。
@ShishirAnshuman 正如我所评论的，我看到您引用的示例存在同样的具体问题。

标签： javascript jquery reactjs

【解决方案1】：

对于使用 HTML5 的应用程序，在 react 中设置 draggable={false} 也应该可以完成此操作。最终会将HTML5 draggable attribute 设置为“false”。

另一种选择是只使用 CSS 并在图像上设置 pointer-events: none;。

【讨论】：

【解决方案2】：

你可以使用onDragStart:

onDragStart={this.preventDragHandler}

和处理程序：

preventDragHandler = (e) => {
  e.preventDefault();
}

【讨论】：

有什么理由比preventDragHandler(e) {e.preventDefault();}更喜欢你的语法吗？
避免this绑定。
有趣。那只会让写作变得更轻松？
这不编译（webpack），我在preventDragHandler 之后的第一个= 得到Unexpected token