- リンクを取得
- ×
- メール
- 他のアプリ
以下は、LWC (Lightning Web Component) を使用して、ボタンの二重クリックを防ぐ方法の詳細です。isButtonDisabled
というフラグを活用し、クリック後にボタンを無効化します。必要に応じて、タイマーを使って一定時間後にボタンを再び有効化する例も示します。
ソリューション
1. JavaScriptコード (LWC)
以下のコードは、ボタンがクリックされた際に無効化される仕組みを実現します。
- // Lightning Web Component (LWC)
- import { LightningElement, track } from 'lwc';
- export default class DisableCommandButton extends LightningElement {
- @track isButtonDisabled = false; // ボタンの状態を管理するフラグ
- handleButtonClick() {
- this.isButtonDisabled = true; // ボタンを無効化
- // 実際の処理を実行する
- this.performAction();
- }
- performAction() {
- // 実際のアクション処理(例:データの保存やAPI呼び出し)
- console.log('アクションを実行しました。');
- // 必要に応じて、ボタンの無効化を解除する
- setTimeout(() => {
- this.isButtonDisabled = false; // 再びボタンを有効化
- }, 3000); // 例: 3秒後に再度有効化
- }
- }
2. HTMLコード (LWC)
- <template>
- <lightning-button
- label="Click Me"
- onclick={handleButtonClick}
- disabled={isButtonDisabled}>
- </lightning-button>
- </template>
実装のポイント
isButtonDisabled
フラグ- ボタンの有効/無効状態を管理します。
- 初期状態では
false
に設定し、クリック時にtrue
に切り替えます。
performAction
メソッド- 実際のアクションを処理します。
- 必要であれば、
setTimeout
を使って一定時間後にフラグをfalse
に戻し、ボタンを再び有効化します。
disabled
属性- ボタンのHTMLで
disabled={isButtonDisabled}
を指定することで、フラグに基づいて動作を制御します。
- ボタンのHTMLで
注意点
- UXの改善: ボタンを無効化するだけでなく、クリック時にスピナーやメッセージを表示することで、ユーザーに現在の状況を明確に伝えることをお勧めします。
- エラーハンドリング: 処理中にエラーが発生した場合の対応も考慮し、ボタンを適切に再有効化するよう設計してください。
結論
LWCを用いたボタンの無効化は簡単かつ効果的に実装可能です。この仕組みを使うことで、二重クリックによる誤操作や予期せぬ動作を防止し、アプリケーションの安定性とユーザー体験を向上させることができます。
コメント
コメントを投稿