如何防止在 React 应用程序中拖放图像？

Question

我们得到了如何防止拖拽图像与jQuery有$('img').on('dragstart', function(event) { event.preventDefault(); });，但我想要实现同样的反应程序，没有jQuery的。我怎样才能做到这一点 ？a) 本地（每个图像的图像） b）全局（对于反应应用程序的所有图像）

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

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

Answer 1

您可以使用onDragStart：

onDragStart={this.preventDragHandler}

和处理程序：

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

Answer 2

对于使用 HTML5 的应用程序，draggable={false}react 中的设置也应该可以完成此任务。它将最终将HTML5 的可拖动属性设置为“false”。

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