プログラミング フロントエンド

【Javascript】ボタン連打によるaxios処理の複数送信を防止したい

スポンサーリンク

こんにちは!

今回は「ボタン連打によるaxios処理の複数送信を防止」する方法について、お伝えしたいと思います。

普通にボタンのonclick時の処理の実装すると、ボタン連打が可能になってしまいます。

特にボタンクリック時にaxiosでDBにデータをインサートする場合、データの不整合が発生することがあるので、対策が必要になりました。

対策:axios処理の前にボタンを非活性にする

こちら実装例になります。

HTML

<button>
  送信
</button>

Javascript

const sendData = (btn) => {
  btn.disabled = true;
}

 

これでボタン連打が防止できました。

 

※buttonタグ(pタグやdivタグなど)で同じように記述してもうまく動作しないので、注意が必要です!

具体的には以下のような書き方です。

HTML

</code></pre>
<div>送信</div>
<pre class="line-numbers"><code class="language-html"></code></pre>
<p>

Javascript

const sendData = (btn) => {
  btn.disabled = true;
}

 

これだと、disableが効かず、ボタン連打ができてしまいます。

以上、お疲れさまでした!🍵

スポンサーリンク

-プログラミング, フロントエンド
-

© 2021 エンジニア×ライフハック Powered by AFFINGER5