SalesforceにおけるWebサービスコールアウトのテスト完全ガイド

Lightning Web Componentでボタンの二重クリックを防ぐ方法

以下は、LWC (Lightning Web Component) を使用して、ボタンの二重クリックを防ぐ方法の詳細です。isButtonDisabledというフラグを活用し、クリック後にボタンを無効化します。必要に応じて、タイマーを使って一定時間後にボタンを再び有効化する例も示します。


ソリューション

1. JavaScriptコード (LWC)

以下のコードは、ボタンがクリックされた際に無効化される仕組みを実現します。

  1. // Lightning Web Component (LWC)
  2. import { LightningElement, track } from 'lwc';
  3.  
  4. export default class DisableCommandButton extends LightningElement {
  5. @track isButtonDisabled = false; // ボタンの状態を管理するフラグ
  6.  
  7. handleButtonClick() {
  8. this.isButtonDisabled = true; // ボタンを無効化
  9.  
  10. // 実際の処理を実行する
  11. this.performAction();
  12. }
  13.  
  14. performAction() {
  15. // 実際のアクション処理(例:データの保存やAPI呼び出し)
  16. console.log('アクションを実行しました。');
  17.  
  18. // 必要に応じて、ボタンの無効化を解除する
  19. setTimeout(() => {
  20. this.isButtonDisabled = false; // 再びボタンを有効化
  21. }, 3000); // 例: 3秒後に再度有効化
  22. }
  23. }

2. HTMLコード (LWC)

  1. <template>
  2. <lightning-button
  3. label="Click Me"
  4. onclick={handleButtonClick}
  5. disabled={isButtonDisabled}>
  6. </lightning-button>
  7. </template>

実装のポイント

  1. isButtonDisabledフラグ

    • ボタンの有効/無効状態を管理します。
    • 初期状態ではfalseに設定し、クリック時にtrueに切り替えます。
  2. performActionメソッド

    • 実際のアクションを処理します。
    • 必要であれば、setTimeoutを使って一定時間後にフラグをfalseに戻し、ボタンを再び有効化します。
  3. disabled属性

    • ボタンのHTMLでdisabled={isButtonDisabled}を指定することで、フラグに基づいて動作を制御します。

注意点

  • UXの改善: ボタンを無効化するだけでなく、クリック時にスピナーやメッセージを表示することで、ユーザーに現在の状況を明確に伝えることをお勧めします。
  • エラーハンドリング: 処理中にエラーが発生した場合の対応も考慮し、ボタンを適切に再有効化するよう設計してください。

結論

LWCを用いたボタンの無効化は簡単かつ効果的に実装可能です。この仕組みを使うことで、二重クリックによる誤操作や予期せぬ動作を防止し、アプリケーションの安定性とユーザー体験を向上させることができます。

コメント