【React(TypeScript)】二度押し防止対応

概要

React(Typescript)で二度押し防止対応をしようと考えた時、押されたら困るボタン等のdisabledを変える方法をパッと思い付きますが、それよりも良い方法が見つかったのでマイベストプラクティスとして共有させていただきたいと思います。

実装方法

useStateでisLoadingを定義し、これを使ってローディング中は「pointer-events: none;」のクラスを有効します。「pointer-events: none;」を有効にすることで、指定したdivの中にあるボタンやリンクなどが押せなくなります。