Formik与antd-mobile的移动端的表单实践（下）

sihai 发布于2019-08-23 12:09 / 849人阅读

摘要：会在用户每次按下提交时进行一次完整校验或更改时进行一次单表单项的验证。传入为表单值与外部自定义传入的返回值为一个对象的表单提交处理而表单提交的处理，和我们做表单验证类似，只需要参考官方示例我们就可以简单的实现表单提交功能。

大家好，工作闲暇之余又来续写一下Formik这个库的文章了，这次文章主要内容为如下：

更多表单组件的封装示例

单选/多选按钮

选择器

时间选择器

文本输入框

提交按钮

Formik的表单验证

Formik的表单提交处理

总结

表单组件的封装

在上篇我们简单的封装了一下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

GPU云服务器云服务器 js 移动端的表单关于适配移动端的移动端的html linux下文件夹的移动硬盘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98010.html

一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

摘要：利用中间件实现异步请求，实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化，项目文章在这里。后来一直没动，前些日子才把后续的完善。欢迎访问我的个人网站：http://www.neroht.com/ 刚学vue和react时，利用业余时间写的关于这两个框架的训练，都相对简单，有的...

tangr206 2019-06-26 17:34 评论0 收藏0
Next轻量级框架与主流工具的整合

摘要：又从开始学习新的东西了，想着还是记录一下学习历程，有输入就要有输出吧，免得以后给忘记学了些什么框架与主流工具的整合地址首先，项目，学习里面的。如有错误和问题欢迎各位大佬不吝赐教轻量级框架与主流工具的整合二完善与优化前言老大说以后会用 next 来做一下 SSR 的项目，让我们有空先学学。又从 0 开始学习新的东西了，想着还是记录一下学习历程，有输入就要有输出吧，免得以后给忘记学了些...

FWHeart 2019-08-23 11:57 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

kun_jian 2019-08-02 15:28 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

J4ck_Chan 2019-08-23 18:32 评论0 收藏0