大家好，今天的篇章要介紹的是昨天介紹過的 Formik

會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day14-formik

Formik

因為在上一章的 Formik 應用完全是最簡略的 HTML，所以今天想要將 material-ui 給添加上去，還有就是介紹 Formik 官方推薦的第三方驗證函式庫 Yup

Yup

Yup 是一個 object { } 的內容驗證懶人包，Yup github 上的說明指出它用起來就像是 Joi，但是更針對瀏覽器上的使用，並只提供精巧且必須的功能（Joi 大多是 node.js 撰寫後端會用到，不過詳細差異筆者並沒有明確的琢磨過）

還有一個地方就是 Formik 完全為了 Yup 量身打造一個可以直接設置 Yup 驗證規則的屬性，筆者就先拿昨天的程式碼來改成用 Yup 驗證必填及純數字的規則，首先要先安裝

npm i yup
npm i -D @types/yup

將 validate 屬性給換成 validationSchema

原本的 validate

改成 validationSchema

利用堆疊條件來設置檢查的需求這樣是不是看起來更方便呢？

執行結果，也就跟原本的一樣檢查必填跟是否是數字

再來我想要將表單套上 material-ui 的 TextField

將原本的 <Formik> 內容

改成都是用 material-ui 的元件

最後執行結果，驗證規則都沒變，只是有比較漂亮的表單了

同場加映下拉選單 Select、單選 Radio box 及 複選 Checkbox 的使用

先增加了三種表單元素的初始值

新增的三種 key 增加到 Yup 驗證規則

checkbox 的 activities 陣列是因應複選填入字串的方式

然後就是 <Formik> 內容新增 Select

新增 Radio

新增 Checkbox

這邊要特別注意的是 onChange 沒有用 Formik 提供的 handleChange，而是自定義並用了另一種 setFieldValue([name], [value]) 來改變 activities 陣列內容

執行結果兩張

以上就是筆者在使用 Formik 製作表單的一點小小心得

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day15-formik-yup-material-ui

明天要介紹 react-intl，它提供了一個新的 Hook useIntl，而且最近在查一些文章發現好像都不符合最近的版本了 -.- （也可能是筆者沒找到），格式化日期，數字和字符串，複數形式都不會講到，只會講到多語系處理的部分，筆者是用了自己的方式實作的，不知道 best practice 在哪能找到