讓你的React表單操做更優雅（formik+yup）

表單操做在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作了簡單的入門介紹，只作拋磚引玉。其實他們的厲害之處不只於此，你們能夠盡情的探索。 如想查看源碼點擊表單代碼連接

若是對本文有什麼意見和建議，歡迎討論和指正！！！