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/jaredpalmer/formik

转载于:https://my.oschina.net/thewindsword/blog/2209015