表单
在mall项目中我们不在使用ant提供的form去创建表单，取而代之的是使用formik 以及 yup配合使用来做表单的验证。下面我会主要介绍一下formik和yup中的一些概念，以及会创建一个playground大家可以去上面根据文档自行探索更加高级的玩法。
formik
formik是一个小型的lib,是为我们解决系统中使用表单所带来的痛苦，它可以帮我们解决三个最烦人的部分
- 获取表单状态的值和表单状态
- 验证和错误消息
- 处理表单提交
formit的设计比redux-form更加优雅，我们知道表单就是为了收集一些数据，然后进行提交。所以这种状态不需要我们存放到reducer中去，可以内部的将这些表单项产生的数据消化掉。
formik Api预览
formik为我们提供了一下Api
<Formik />是一个可以帮助你构建表单的组件，我们有三种方式可以渲染<Formik />
- <Formik component> //优先考虑使用
- <Formik render> //不要和上面的混合使用
- <Formik children> //优先使用上两者
这里有个练习的地方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<Values> | Promise<any>
我们可以通过这个属性进行手动的验证，是一种无依赖，直接的方式来验证您的表单。
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", "15737937865@163.com");
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
formikBag.setSubmitting(false);
}, 1000);
};
