react表单的使用- formik

表单

在mall项目中我们不在使用ant提供的form去创建表单，取而代之的是使用formik 以及 yup配合使用来做表单的验证。下面我会主要介绍一下formik和yup中的一些概念，以及会创建一个playground大家可以去上面根据文档自行探索更加高级的玩法。

formik

formik是一个小型的lib,是为我们解决系统中使用表单所带来的痛苦，它可以帮我们解决三个最烦人的部分

1. 获取表单状态的值和表单状态
2. 验证和错误消息
3. 处理表单提交
   formit的设计比redux-form更加优雅，我们知道表单就是为了收集一些数据，然后进行提交。所以这种状态不需要我们存放到reducer中去，可以内部的将这些表单项产生的数据消化掉。

formik Api预览

formik为我们提供了一下Api

是一个可以帮助你构建表单的组件，我们有三种方式可以渲染

• //优先考虑使用
• //不要和上面的混合使用
• //优先使用上两者
  这里有个练习的地方Formik Playground

我们可以把Formik看成一个组件，内部的子组件时通过component, render, children的方式注入的。子组件的产生的onChange事件回调给父组件，父组件进行处理后将产生的数据以及错误信息回调给子组件。这样两者之间就能进行通信了。

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

如何验证表单

Formik有两个属性一个是validate函数签名是(values: Values) => FormikErrors | Promise
我们可以通过这个属性进行手动的验证，是一种无依赖，直接的方式来验证您的表单。

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;
};

另外一个是validationSchema这是配合yup进行验证。函数签名是
validationSchema?: Schema | (() => Schema)

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

如何提交表单

Formik有个属性一个是onSubmit函数签名是onSubmit: (values: Values, formikBag: FormikBag) => void
其中values就是我们表单收集的数据

const handleOnSubmit = (values: FormValueType, formikBag: FormikBag) => {
  // 这里可以通过actions里的函数去给表单里的filed设置或者设置错误
  // actions.setFieldValue("email", "[email protected]");

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