Formik與antd-mobile的移動端的表單實踐（下）

你們好，工做閒暇之餘又來續寫一下Formik這個庫的文章了，此次文章主要內容爲以下：

1. 更多表單組件的封裝示例

   • 單選/多選按鈕
   • 選擇器
   • 時間選擇器
   • 文本輸入框
   • 提交按鈕
2. Formik的表單驗證
3. Formik的表單提交處理
4. 總結

表單組件的封裝

在上篇咱們簡單的封裝了一下InputItem組件，併爲該組件增長了錯誤提示功能，接下來咱們能夠封裝咱們經常使用的表單組件並經過一樣的方法爲其添加錯誤提示功能。

HOCErrorInItem(MyInputItem,MyErrorItem)

單選/多選按鈕

選擇器

時間選擇器

文本輸入框

提交按鈕

Formik的表單驗證

要驗證表單，咱們須要作的很簡單，就跟上篇官方示例中的代碼同樣,在withFormik()函數傳入的對象中，修改validate方法便可。全部驗證邏輯能夠在這裏一次解決。Formik會在用戶每次按下提交時進行一次完整校驗或touched更改時進行一次單表單項的驗證。
PS: 失去焦點相關對象爲touched，能夠經過setFieldTouched()函數來設置它。

// 傳入爲表單值與外部自定義傳入的props
// 返回值爲一個errors對象
 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;
  },

Formik的表單提交處理

而表單提交的處理，和咱們作表單驗證相似，只須要參考官方示例咱們就能夠簡單的實現表單提交功能。值得注意的是setSubmitting()函數，咱們按下提交按鈕時，Formik會自動幫咱們disable掉提交按鈕，防止屢次提交的發生，而setSubmitting()函數則是用於控制submit按鈕，在ajax完成/失敗後咱們能夠經過setSubmitting(false)來讓咱們的提交按鈕能夠進行下一次提交。

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

總結

Formik在工做中也是幫助我快速構建出了表單頁面，在封裝完UI庫的相關組件後，靜態表單的構建變得異常的快速，而動態表單也能夠經過jsx語法的判斷來進行，在製做表單這一塊，Formik真的作到了像它所說的那樣:

Build forms in React, without the tears 😭
上手快速，構建一條龍，在這裏強烈推薦一波
Github： https://github.com/jaredpalme...