摘要：會(huì)在用戶每次按下提交時(shí)進(jìn)行一次完整校驗(yàn)或更改時(shí)進(jìn)行一次單表單項(xiàng)的驗(yàn)證。傳入為表單值與外部自定義傳入的返回值為一個(gè)對(duì)象的表單提交處理而表單提交的處理，和我們做表單驗(yàn)證類似，只需要參考官方示例我們就可以簡(jiǎn)單的實(shí)現(xiàn)表單提交功能。

大家好，工作閑暇之余又來(lái)續(xù)寫一下Formik這個(gè)庫(kù)的文章了，這次文章主要內(nèi)容為如下：

更多表單組件的封裝示例

單選/多選按鈕

選擇器

時(shí)間選擇器

文本輸入框

提交按鈕

Formik的表單驗(yàn)證

Formik的表單提交處理

總結(jié)

在上篇我們簡(jiǎn)單的封裝了一下InputItem組件，并為該組件增加了錯(cuò)誤提示功能，接下來(lái)我們可以封裝我們常用的表單組件并通過(guò)同樣的方法為其添加錯(cuò)誤提示功能。

    HOCErrorInItem(MyInputItem,MyErrorItem)

要驗(yàn)證表單，我們需要做的很簡(jiǎn)單，就跟上篇官方示例中的代碼一樣,在withFormik()函數(shù)傳入的對(duì)象中，修改validate方法即可。所有驗(yàn)證邏輯可以在這里一次解決。Formik會(huì)在用戶每次按下提交時(shí)進(jìn)行一次完整校驗(yàn)或touched更改時(shí)進(jìn)行一次單表單項(xiàng)的驗(yàn)證。
PS: 失去焦點(diǎn)相關(guān)對(duì)象為touched，可以通過(guò)setFieldTouched()函數(shù)來(lái)設(shè)置它。

// 傳入為表單值與外部自定義傳入的props
// 返回值為一個(gè)errors對(duì)象
 validate: (values, props) => {
    const errors = {};
    if (!values.email) {
      errors.email = "Required";
    } else if (
      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)
    ) {
      errors.email = "Invalid email address";
    }
    return errors;
  },

而表單提交的處理，和我們做表單驗(yàn)證類似，只需要參考官方示例我們就可以簡(jiǎn)單的實(shí)現(xiàn)表單提交功能。值得注意的是setSubmitting()函數(shù)，我們按下提交按鈕時(shí)，F(xiàn)ormik會(huì)自動(dòng)幫我們disable掉提交按鈕，防止多次提交的發(fā)生，而setSubmitting()函數(shù)則是用于控制submit按鈕，在ajax完成/失敗后我們可以通過(guò)setSubmitting(false)來(lái)讓我們的提交按鈕可以進(jìn)行下一次提交。

handleSubmit: (
    values,
    {
      props,
      setSubmitting,
      setErrors /* setValues, setStatus, and other goodies */,
    }
  ) => {
  // Ajax請(qǐng)求進(jìn)行表單提交
}

Formik在工作中也是幫助我快速構(gòu)建出了表單頁(yè)面，在封裝完UI庫(kù)的相關(guān)組件后，靜態(tài)表單的構(gòu)建變得異常的快速，而動(dòng)態(tài)表單也可以通過(guò)jsx語(yǔ)法的判斷來(lái)進(jìn)行，在制作表單這一塊，F(xiàn)ormik真的做到了像它所說(shuō)的那樣:

Build forms in React, without the tears