【React】画像がクリックされたあと、一定時間その画像のクリックを不可能にする

目的

画像(imgタグ)をクリックすると処理が走るが、連続クリックしてしまうのを防止したい

前提

imgタグにonclick属性でクリック時の処理を記載

画像クリックを無効化する

pointer-events: none;にすることで要素のクリック、ホバーなどを無効化できる

onclickで渡されたevent.targetのpointer-eventsをnoneにする。
一定時間(Setinterval)経つと、auto に戻す

event.target.style.pointerEvents = "none";
    setTimeout(function() {
      event.target.style.pointerEvents = "auto";
      console.log("クリック再開可能になりました。");
    }, 3000);

備考

画像が直接保存されたくない時などにも便利かも