今天是第四天，主要是幫我的記帳 App 加入了表單輸入驗證與防呆機制，以及分類標籤選單。





原本每筆資料只有 { id, name, amount }，這次新增了 category 屬性，讓每筆記帳資料都可以記錄分類，之後也能在列表中顯示對應的標籤。

在實作的過程中，我也學到了 React 的單一根節點（Single Root Node。因為 React 元件本質上是一個 JavaScript 函式，而函式一次只能回傳一個結果，所以如果 JSX 中有多個元素，就需要先用一個外層元素包起來。
另外，我也學會了 name.trim() 的用法，可以把輸入內容前後的空白移除，避免使用者只輸入空白也被當成有效資料。還學到了早期回傳（Early Return），當資料不符合條件時，就先顯示警告並直接 return，避免錯誤資料被加入 state。

除此之外，也複習了一些事件處理的基本觀念。onChange 可以監聽輸入框的內容變化，而 e 是瀏覽器提供的事件物件，e.target 代表觸發事件的 HTML 元素，e.target.value 則可以取得使用者目前輸入或選擇的內容。


在過程中，我還注意到 inputMode 這個屬性。它可以提示行動裝置使用對應的虛擬鍵盤。原本輸入金額時，他會自動幫我跳數字，但填寫項目名稱時不會，所以我就問了 AI 能不能讓使用者點選項目輸入框時，幫我自動切換成繁體中文輸入。
不過實際了解後才發現，這並不是單純靠網頁程式碼就能控制的。inputMode 主要是給行動裝置提示鍵盤類型，在桌面瀏覽器上沒有辦法直接控制 Windows 或 Mac 的實體輸入法狀態，例如強制切換成注音或英數。這也讓我發現，有些看起來很簡單的功能，其實會受到瀏覽器和作業系統限制。