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...