如何防止在React應用中拖放圖像？

Question

我們獲得了如何使用$('img').on('dragstart', function(event) { event.preventDefault(); }); 來防止jquery拖放圖像 $('img').on('dragstart', function(event) { event.preventDefault(); }); 但我想在React應用程序中實現相同效果，並且沒有jquery。 我怎樣才能做到這一點 ？ a）本地（每個圖像一個圖像）b）全局（用於react應用程序的所有圖像）

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

目的是防止通過拖放保存圖像。

Answer 1

您可以使用onDragStart ：

onDragStart={this.preventDragHandler}

和處理程序：

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

Answer 2

對於使用HTML5的應用程序，在react中設置draggable={false}應該可以做到這一點。 它將把HTML5可拖動屬性設置為“ false”。

另一種選擇是只使用CSS並設置pointer-events: none; 在圖像上。