表單操作在React中一直是一件比較繁瑣的事情，使用formik可以極大的簡化表單操作，formik的slogan就是
Build forms in React, without the tears ?
formik介紹
在介紹formik之前，我們先來說說日常操作form表單中的一些痛點。
當我們想要訪問表單中的input控制元件的值時，通常有兩種操作，一種是使用ref去得到dom結構，第二種是使用state儲存value。首先，針對於第一種情況，雖然使用ref能夠讓我們很方便的獲取到dom節點，進而獲取input的值，但是需要注意的是當我們在使用React的時候，我們需要時刻告訴自己，不要直接操作dom！不要直接操作dom！不要直接操作dom！官方也是不推薦該做法的； 對於第二種做法，雖然這是官方推薦的做法，當時由於繫結了state，所以form表單中的控制元件也變成了受控元件，如果我們想真正改動其資料，我們往往需要再繫結一個onChange事件，當控制元件過多時，操作也是非常繁瑣的。
而formik的出現，將表單操作化繁為簡，使得表單操作變得非常的簡單。formik不僅提供了針對的表單的狀態管理，還能很方便的對錶單做規則校驗。其實formik的原理很簡單：它內建了表單的state管理操作，無需我們在單獨為表單建立state，同時使用了Context，能夠讓表單元件多層巢狀，不再需要我們一層層傳遞。
入門例子
我們以一個簡單的例子來看看formik到底是如何使用的，它又怎樣簡化了表單的操作。
- 姓名（name）: 必填非空
- 性別（gender）: 必選非空
- 年齡（age）:必填非空，大於0的整數
formik提供了一個名為Formik的元件，元件包含了initialValues，validate,onSubmit,render等props（不限於此，列舉出來的只是當前用到的關鍵的props，完整結構詳解Formik API，下面解釋一個各個prop作用：
- initialValues：初始化表單的資料
- validate：表單規則校驗，返回一個錯誤資訊的物件
- onSubmit: 獲得表單各個欄位，自定義自己的業務操作
- render: 表單內部的children元件
針對內部的表單，render方法會傳入一個props，props包括了values，errors，handleSubmit，handleChange，handleBlur等屬性（更詳細的內容參見完整props，其中：
- values：對應的就是表單各項資料
- errors：validate所返回的表單校驗後的錯誤資訊
- touched：表示表單內的控制元件是否已經被操作過
- handleSubmit：是表單觸發提交事件後的formik對提交流程處理事件，規則校驗就在其中
- handleChane: 更改表單資料的事件
- handleBlur: 控制元件失去焦點後的操作事件，會進行對錶單進行規則校驗的流程
示例程式碼如下：
<Formik
initialValues={{
name: "",
gender: "",
age: ""
}}
validate={values => {
let errors = {};
if (values.name.length === 0) {
errors.name = "Name can not be empty"
}
if (values.gender.length === 0) {
errors.gender = "You must choose a gender"
}
if (values.age <= 0 || values.age % 1 !== 0) {
errors.age = "Age must be a Positive Integer"
}
return errors;
}}
onSubmit={(values) => {
console.log(values)
}}
render={props =>
<form onSubmit={props.handleSubmit}>
<div className="content">
<div>
<label>姓名： </label><input type="text" id="name" name="name" value={props.values.name}
onChange={props.handleChange} onBlur={props.handleBlur}/>
{props.touched.name && props.errors.name && <div>{props.errors.name}</div>}
</div>
<div>
<label>性別： </label>
<input type="radio" id="male" value="male" name="gender" onChange={props.handleChange}
onBlur={props.handleBlur}/> <label htmlFor="male">男</label>
<input type="radio" id="female" value="female" name="gender" onChange={props.handleChange}
onBlur={props.handleBlur}/> <label htmlFor="female">女</label>
{props.touched.gender && props.errors.gender && <div>{props.errors.gender}</div>}
</div>
<div>
<label>年齡： </label><input type="number" id="age" name="age" value={props.values.age}
onChange={props.handleChange} onBlur={props.handleBlur}/>
{props.touched.age && props.errors.age && <div>{props.errors.age}</div>}
</div>
<div className="submit-area">
<button type="submit">提交</button>
</div>
</div>
</form>
}
/>
複製程式碼注意：在輸出錯誤資訊的時候，通常有
touched.name&&errors.name的判斷，這是因為formik在做表單校驗的時候，會將全欄位都檢查一遍，不管使用者有沒有操作，但是對於使用者來說，通常不希望在還沒有操作的欄位顯示一行錯誤資訊，所以需要touched欄位檢視該欄位是否已經操作過，操作過並且有錯誤，才顯示。 通過例子可以看出，通過Formik元件傳入初始欄位，校驗規則，提交事件；並在表單中繫結上handleSubmit，handleChange，handleBlur等事件後，我們就能夠實現一個簡單表單操作。
但是我們依舊可以看出在每一個輸入控制元件的地方，都重複的繫結了onChange，onBlur等事件，並且每個輸入錯誤資訊的方式都是很重複的，這顯得有點累贅。但是好在formik提交了Form，Field，ErrorMessage等封裝好的元件，用於減少重複的工作，程式碼如下：
<Formik
......
//same as before
render={props =>
<Form>
<div className="content">
<div>
<label>姓名： </label><Field name="name"/>
<ErrorMessage name="name"/>
</div>
<div>
<label>性別： </label>
<Field name="gender" render={({field}) =>
<input type="radio" name={field.name} value="male" checked={field.value === "male"}
onChange={field.onChange}
onBlur={field.onBlur}/>
}/>
<label htmlFor="male">男</label>
<Field name="gender" render={({field}) =>
<input type="radio" name={field.name} value="female" checked={field.value === "female"}
onChange={field.onChange}
onBlur={field.onBlur}/>
}/> <label htmlFor="female">女</label>
<ErrorMessage name="gender"/>
</div>
<div>
<label>年齡： </label><Field name="age"/>
<ErrorMessage name="age"/>
</div>
<div className="submit-area">
<button type="submit">提交</button>
</div>
</div>
</Form>
}
/>
複製程式碼可以看出，使用formik提供的元件還能進一步簡化程式碼，通過對比可以看出，Form元件想到與form加上onSubmit；ErrorMessage元件就是將touched,errors等一系列判斷包裹了起來；Field元件則是封裝了onChange，onBlur，value等屬性，需要注意的是對於radio，checkbox，select等控制元件需要單獨做一些特殊處理，通常使用其render方法來自定義，除此之外，因為有了render方法，使得Field也能很好的和其他的第三方封裝的控制元件結合。
此外，formik針對陣列型別屬性也有很好的支援，現在讓我們在表單裡面加一個欄位，表單樣式如下：
我們為表單新增了一個addresses欄位，它是一個儲存地址的資料，它的驗證規則是至少有一個非空的欄位。
formik提供了一個FieldArray的元件專門處理陣列型別欄位，程式碼如下：
<Formik
initialValues={{
name: "",
gender: "",
age: "",
addresses: [""]
}}
validate={values => {
let errors = {};
if (values.name.length === 0) {
errors.name = "Name can not be empty"
}
if (values.gender.length === 0) {
errors.gender = "You must choose a gender"
}
if (values.age <= 0 || values.age % 1 !== 0) {
errors.age = "Age must be a Positive Integer"
}
let addresses = values.addresses.filter(address => address.trim() !== "");
if (addresses.length === 0) {
errors.addresses = "Addresses must have 1 address at least"
}
return errors;
}}
onSubmit={(values) => {
console.log(values)
}}
render={props =>
<Form>
<div className="content">
......
// same as before
<div>
<label>地址： </label>
<FieldArray name="addresses" render={arrayHelper =>
<div>
{props.values.addresses.map((address, index) =>
<div className="address">
<Field name={`addresses.${index}`}/>
<div className="address_add" onClick={() => {
arrayHelper.push("")
}}>+
</div>
</div>
)}
</div>
}/>
<ErrorMessage name="addresses" component="div" className="error"/>
</div>
<div className="submit-area">
<button type="submit">提交</button>
</div>
</div>
</Form>
}
/>
複製程式碼可以看到，使用FieldArray時，它會提供一個arrayHelper的引數，我們可以通過arrayHelper很方便去運算元組的陣列，如push，pop等等（更詳細的參見完整arrayHelper API）
到此為止，就是formik的基本功能的介紹了。
注入Yup
雖然formik已經極大的方便了表單的操作，但是我們還是可以看到在做表單驗證的時候，寫的程式碼還是比較繁瑣，這個時候就需要yup出場了，yup的專長就是做規則校驗。並且聰明的formik作者在設計formik的時候就讓其很好的支援yup了。
yup的官方介紹：
Yup is a JavaScript object schema validator and object parser.
在Formik元件裡有一個名為validationSchema的prop，這個就是為yup留出的介面。 話不多說，先show程式碼：
//沒有yup的情況
<Formik
validate={values => {
let errors = {};
if (values.name.length === 0) {
errors.name = "Name can not be empty"
}
if (values.gender.length === 0) {
errors.gender = "You must choose a gender"
}
if (values.age <= 0 || values.age % 1 !== 0) {
errors.age = "Age must be a Positive Integer"
}
let addresses = values.addresses.filter(address => address.trim() !== "");
if (addresses.length === 0) {
errors.addresses = "Addresses must have 1 address at least"
}
return errors;
}}
//......
/>
//使用yup的情況
<Formik
validationSchema={Yup.object().shape({
name: Yup.string().trim().required("Name can not be empty"),
gender: Yup.string().required("You must choose a gender"),
age: Yup.number().moreThan(0, "Age must be greater than 0").integer("Age must be a integer"),
addresses: Yup.array().compact().min(1, "Addresses must have 1 address at least")
})}
//......
/>
複製程式碼可以看到使用Yup後，不管是從程式碼量，還是可讀性來看都提交了很多，尤其是在表單非常複雜時，這之間的優化會非常的明顯。
可以看到Yup的操作非常的語義化，所以學習成本非常的低，你只需要知道它的api，就能很輕易的使用它，所以對Yup的使用不再贅述，詳細資訊參見Yup文件。
結語
本文也只是對formik+yup做了簡單的入門介紹，只做拋磚引玉。其實他們的厲害之處不僅於此，大家可以盡情的探索。 如想檢視原始碼點選表單程式碼連結
如果對本文有什麼意見和建議，歡迎討論和指正！！！