表單

在mall項(xiàng)目中我們不在使用ant提供的form去創(chuàng)建表單，取而代之的是使用formik 以及 yup配合使用來(lái)做表單的驗(yàn)證。下面我會(huì)主要介紹一下formik和yup中的一些概念，以及會(huì)創(chuàng)建一個(gè)playground大家可以去上面根據(jù)文檔自行探索更加高級(jí)的玩法。

formik

formik是一個(gè)小型的lib,是為我們解決系統(tǒng)中使用表單所帶來(lái)的痛苦，它可以幫我們解決三個(gè)最煩人的部分

1. 獲取表單狀態(tài)的值和表單狀態(tài)
2. 驗(yàn)證和錯(cuò)誤消息
3. 處理表單提交
   formit的設(shè)計(jì)比redux-form更加優(yōu)雅，我們知道表單就是為了收集一些數(shù)據(jù)，然后進(jìn)行提交。所以這種狀態(tài)不需要我們存放到reducer中去，可以內(nèi)部的將這些表單項(xiàng)產(chǎn)生的數(shù)據(jù)消化掉。

formik Api預(yù)覽

formik為我們提供了一下Api

<Formik />是一個(gè)可以幫助你構(gòu)建表單的組件，我們有三種方式可以渲染<Formik />

• <Formik component> //優(yōu)先考慮使用
• <Formik render> //不要和上面的混合使用
• <Formik children> //優(yōu)先使用上兩者
  這里有個(gè)練習(xí)的地方Formik Playground

我們可以把Formik看成一個(gè)組件，內(nèi)部的子組件時(shí)通過(guò)component, render, children的方式注入的。子組件的產(chǎn)生的onChange事件回調(diào)給父組件，父組件進(jìn)行處理后將產(chǎn)生的數(shù)據(jù)以及錯(cuò)誤信息回調(diào)給子組件。這樣兩者之間就能進(jìn)行通信了。

┌─────────────────────────┬───Formik──▲────────────────────────┐
│ │ │ │
│ inject data and action│ │ │
│ │ │callback │
│ validate│ │ │
│ │ │ │
│ ┌───────────▼Component──┴─────────┐ │
│ │ │ │
│ │ ┌───────────────────────┐ │ │
│ │ │ render componet │ │ │
│ │ │ show error │ │ │
│ │ │ show values │ │ │
│ │ └───────────────────────┘ │ │
│ └─────────────────────────────────┘ │
│ │
│ │
└──────────────────────────────────────────────────────────────┘

如何驗(yàn)證表單

Formik有兩個(gè)屬性一個(gè)是validate函數(shù)簽名是(values: Values) => FormikErrors<Values> | Promise<any>
我們可以通過(guò)這個(gè)屬性進(jìn)行手動(dòng)的驗(yàn)證，是一種無(wú)依賴，直接的方式來(lái)驗(yàn)證您的表單。

const validate = values => {
  let 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;
};

另外一個(gè)是validationSchema這是配合yup進(jìn)行驗(yàn)證。函數(shù)簽名是
validationSchema?: Schema | (() => Schema)

const formSchema = yup.object().shape({
  email: yup.string().required("不能為空")
});

如何提交表單

Formik有個(gè)屬性一個(gè)是onSubmit函數(shù)簽名是onSubmit: (values: Values, formikBag: FormikBag) => void
其中values就是我們表單收集的數(shù)據(jù)

const handleOnSubmit = (values: FormValueType, formikBag: FormikBag) => {
  // 這里可以通過(guò)actions里的函數(shù)去給表單里的filed設(shè)置或者設(shè)置錯(cuò)誤
  // actions.setFieldValue("email", "15737937865@163.com");

  setTimeout(() => {
    alert(JSON.stringify(values, null, 2));
    formikBag.setSubmitting(false);
  }, 1000);
};