---
# System prepended metadata

title: 作業參考整理
tags: [2022 React 新手讀書會]

---

---
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̍̽̌õ̃̿.̓̀͊.̅͌̓.̎̾̓#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)|...|