昨天我們成功利用 useState 讓按鈕具備切換狀態的功能。但在真實的醫療與健康管理系統中，「防呆機制」非常重要。如果使用者只是滑動螢幕時不小心誤觸了按鈕，直接標記為「已服用」可能會造成用藥紀錄混亂。
今天我們要在使用者點擊按鈕時，加入一個彈出式對話框 (Modal)，要求使用者再次確認，讓系統的操作流程更加嚴謹。
Step 1：加入控制 Modal 的新狀態
我們需要一個新的 State 來記錄「目前正在確認哪一筆藥物」。當這個 State 有值時，對話框就會顯示出來；當它是 null 時，對話框就會隱藏。
Step 2：全面升級 MedicationList 元件
為了避免程式碼放錯區塊，請直接將 src/components/MedicationList.jsx 的內容全部替換為以下完整程式碼。我們在裡面新增了 Modal 的 UI 與防呆邏輯:
成功畫面如下，會彈出視窗讓你確認是否已服用，按下確認就會看到第二欄變為已服用
iThome鐵人賽
看影片追技術