---
tags: 2022 React 新手讀書會
---
# 作業參考整理

解決問題並沒有絕對的最佳解，不過了解更多解決問題的方法總是好事，
於是助教隨機擷取關於 LV3 作業會遇到的問題點，以及同學們富含創意的解法！

## 操縱資料

1. 使用 onChange 來監控 input 的變化。
2. 使用 onSubmit 來監控 form 的提交。
3. 使用 [useEffect Hook](https://hackmd.io/lGayE3kzT-qfUnAgpPSReQ?view) 搭配 State 來監控每次的資料更新。

## 資料驗證

驗證輸入內容絕對是本項作業的重點之一，如果沒有限制使用者輸入內容將會導致程式出現無法預料的結果。在後續每日練習中會提供 [React Hook Form](https://react-hook-form.com/) 來做更進階的表單輸入管理。

1. [Mitour#0672](https://codepen.io/mitour/pen/qBoKvpK?editors=0010) 使用 [原生的表單數據較驗](https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Form_validation) 來限制使用者正確的輸入資料種類與數量，像是：required、min、type="number"……等。
2. 將資料提取出來，使用 Javascript 撰寫判斷，像是 [Regex](https://regexr.com/)、[trim()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/trim)……等手段。

## 週任務 - 匯率產生器

共 61 人繳交 第一周 LV3 作業
共 4 人挑戰 10 分鐘錄影完成
於 2022/08/10 17:00 統計

| Discord | CodePen / 答案 | 備註 |
|:----------:|:-------------------------------------------------------:|:------:|
| WeiJ#7376 | [CodePen](https://codepen.io/weijlin/pen/xxWYBBK) | ... |
| Rice#8043 | [CodePen](https://codepen.io/riecball/pen/bGvLyOE?editors=1011) | ... |
| hw#0715 | [CodePen](https://codepen.io/Lhwei/pen/jOzzEbe) | ... |
| 𝓛𝓊𝒸𝓎#8635 | [CodePen](https://codepen.io/lucygirl/pen/BarrKjE) | ... |
| alphatero#8299 | [CodePen](https://alphatero.github.io/react-ts-practice/dist/index.html) | ... |
| 鉛筆#7763 | [CodePen](https://codesandbox.io/s/hui-lu-chan-sheng-qi-pk8xet) | ... |
| Warkyrie#0047 | [CodePen](https://codepen.io/rainbowrain/pen/oNqqwGr) | ... |
| React-慧茹(拉拉醬)#3414 | [CodePen](https://codepen.io/lala-lee-jobs/pen/WNzzOjj?editors=0010) | ... |
| Z̓̌̏a̅́̓l̔͑͑g̍̽̌õ̃̿.̓̀͊.̅͌̓.̎̾̓#9927 | [CodePen](https://codepen.io/shumhoyin/pen/KKoopVp) | ... |
| yunyun#5215 | [CodePen](https://codepen.io/yun_yunni/pen/MWVVEYa) | ... |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/WNzzXbG?editors=1010) | ... |
| Mitour#0672 | [CodePen](https://codepen.io/collection/QWgoRd) | ... |
| IreneLee#7932 | [CodePen](https://codepen.io/ntjtcxpt-the-animator/pen/vYRdqvK?editors=1010) | ... |
| JC#8658 | [CodePen](https://codepen.io/jcsamoyed/pen/rNddvxb) | ... |
| 朱 bo.od#1625 | [CodePen](https://codepen.io/welwwtht-the-scripter/pen/wvmmdZK) | ... |
| CofCat#9226 | [CodePen](https://codepen.io/cofcat456/pen/NWYYrgj?editors=1011) | ... |
| 灰塵貓#7994 | [CodePen](https://codepen.io/rjk66268/pen/xxWWYYp?editors=0010) | ... |
| bakiii#2652 | [CodePen](https://codepen.io/aki168/pen/yLKKqNX) | ... |
| Shau#6400 | [CodePen](https://codepen.io/collection/zxMEwm) | ... |
| 黃士桓#7654 | [CodePen](https://codepen.io/shr-huan-huang/pen/bGvvrEv) | ... |
| 葉秋#2335 | [CodePen](https://codepen.io/as880074/pen/dymebme) | ... |
| SHIN#6075 | [CodePen](https://codepen.io/shin9626/pen/BarrmPW) | ... |
| Yihan#5560 | [CodePen](https://codepen.io/h513hh513h/pen/MWVVdwY?editors=0010) | ... |
| rainbow#3329 | [CodePen](https://codepen.io/g901612002/pen/RwMMPLE) | ... |
| joe.chang#4432 | [CodePen](https://codepen.io/t7552175/pen/QWmrOXq) | ... |
| Anson#3594 | [CodePen](https://codepen.io/huanmingchang/pen/MWVGQqe?editors=1112) | ... |
| Ryder#7398 | [CodePen](https://codepen.io/rider159159/pen/xxWjeQG) | ... |
| 翔.#0859 | [CodePen](https://codepen.io/energy95272z/pen/oNqddmY) | ... |
| 時雨#8837 | [CodePen](https://codepen.io/jjustin-35/pen/gOezeYJ?editors=0010) | ... |
| Claire Chang#2116 | [CodePen](https://codepen.io/claire-chang-the-bashful/pen/ZExoMrP) | ... |
| randy#1746 | [CodePen](https://codepen.io/claire-chang-the-bashful/pen/ZExoMrP) | ... |
| Wins#8457 | [CodePen](https://codepen.io/winszhuang/pen/GRxdNQw) | ... |
| Yanyan#3555 | [CodePen](https://codepen.io/wei-yi-lee/pen/qBoYvbK?editors=1010) | ... |
| 無名#6427 | [CodePen](https://codepen.io/Nomoney/pen/ExELJmz) | ... |
| JimHwang#3594 | [CodePen](https://codepen.io/jimh1129/pen/GRxdbrb) | ... |
| ねこ*#9385 | [CodePen](https://codepen.io/kunpao0104/pen/rNddrVp) | ... |
| Kelvin#3296 | [CodePen](https://codepen.io/kelvinchang/pen/MWVGdPy) | ... |
| kimn#1503 | [CodePen](https://github.com/kimnTai/react-week1) | ... |
| lloydd#8224 | [CodePen](https://codepen.io/thanatus25/pen/mdxKbqK) | ... |
| charlottelee849#0366 | [CodePen](https://codepen.io/charlotte-lee/pen/poLKzRM?editors=0011 ) | ... |
| john21429#9434 | [CodePen](https://codepen.io/john21429/pen/XWEYrNm) | ... |
| Eric Su#7798 | [CodePen](https://codepen.io/wc-su/pen/mdxLKWL) | ... |
| Kenge#3690 | [CodePen](https://codepen.io/pgkusn/pen/ExERxKb) | ... |
| 阿樂#8739 | [CodePen](https://codepen.io/Mao104/pen/dymKXNg) | ... |
| Tsuei#9284 | [CodePen](https://codepen.io/AlbertoLL/pen/poLVLyR?editors=0111) | ... |
| wenyun#2362 | [CodePen](https://codepen.io/wenyuncc/pen/OJvZVvG) | ... |
| Tao Doris#5230 | [CodePen](https://codepen.io/taomaomao/pen/abYGqjw) | ... |
| Vada Chen#2055 | [CodePen](https://codepen.io/vadachen/pen/QWmxaZr) | ... |
| 真．穎旻粉撕#4995 | [CodePen](https://codepen.io/gbnbihif/pen/ZExRLWL) | ... |
| Ayre#0016 | [CodePen](https://codepen.io/yichunlin09/pen/rNdKepx?editors=0010) | ... |
| wiimax#4564 | [CodePen](https://codepen.io/willismax/pen/zYWWwJP) | ... |
| L0F0#8733 | [CodePen](https://codepen.io/l0f0/pen/QWmxPwv?editors=0010) | ... |
| 彼得#1923 | [CodePen](https://codepen.io/shiou-ho/pen/QWmxpeZ) | ... |
| shani#4593 | [CodePen](https://codepen.io/ShaniMa/pen/poLKmNY) | ... |
| JimmyChang#5558 | [CodePen](https://codepen.io/JimmyChangWenChi/pen/eYMKWOw) | ... |
| Rikku#1756 | [CodePen](https://codesandbox.io/s/week-1-homework-10c6mi?file=/src/App.js:2134-2145) | ... |
| 城堡#2126 | [CodePen](https://codepen.io/tthcastle/pen/YzajyrJ) | ... |
| Andrew Wu#5237 | [CodePen](https://github.com/andy2148deathedge/ts-react-w1/blob/main/src/components/exChgRate.tsx) | ... |
| 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/vYRaxMK ) | ... |
| 山貓(焜)#7041 | [CodePen](https://codepen.io/nopeta/pen/VwXBLpp) | ... |
| Ada_Su#8042 | [CodePen](https://codepen.io/zggsoagv-the-scripter/pen/yLKErgv) | ... |
| RayRayHuang#1998 | [CodePen](https://codepen.io/hongrueihuang/pen/bGvKXmY) | ... |
| 翔#0859 | [CodePen](https://codepen.io/energy95272z/pen/oNqddmY) | ... |
|Cherry ZY#4647|[CodePen](https://codepen.io/qoosdd89382/pen/YzaJEyV?editors=0110)|...|