How can I prevent drag and drop images in a react app?

Question

We got how to prevent drag drop image with jquery with $('img').on('dragstart', function(event) { event.preventDefault(); }); but I want to achieve the same in a react app, and without jquery. How can I do this ? a) locally (image per image) b) globally (for all images of the react app)

I still want to keep control over other interactions, so img { pointer-events: none; } is not a solution.

The goal is to prevent saving image through drag and drop.

Answer 1

You can use onDragStart:

onDragStart={this.preventDragHandler}

And the handler:

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