表单提交的时候报500_Formik - 让你不再烦恼的React表单

让我们面对现实吧：在 React 里写表单是一件挺麻烦的事情。许多的表单库充满了花里胡哨的代码技巧，但不少时候却会成为拖慢性能的短板。而 Formik，使得用 React 构建表单变得更为简单，减轻了各种繁琐的工作。

React.js

简介

Formik，是 formium 在 Github 上开源的 React 表单库，项目位于 https://github.com/formium/formik，目前版本为 v2.1.5。Formik 可以减轻在构建表单时的繁琐工作，主要体现在以下3个方面：

• 从表单状态中获取和写入数据；
• 表单验证和错误提示；
• 处理表单提交逻辑。

Formik 使得表单构建的逻辑更为紧凑和有组织，进一步使得测试、重构等工作更为简单。

Formik表单库

安装

Formik 需要 React v15+，可以兼容 ReactDOM 和 React Native，且十分轻量，压缩后约 12.7 KB。可以使用 NPM 安装：

 npm install formik --save

也可以用 YARN 安装：

 yarn add formik

还可以在浏览器直接使用 CDN 引入：

示例

Formik使用简单，其把一些表单中共有的部分和功能逻辑打包成了子组件，方便构建使用。我们来看一个基本的使用例子：

import React from 'react';import ReactDOM from 'react-dom';import { Formik, Field, Form } from 'formik';const Basic = () => (  

Sign Up

{ await new Promise(r => setTimeout(r, 500)); alert(JSON.stringify(values, null, 2)); }} > First Name Last Name Email Submit

);ReactDOM.render(, document.getElementById('root'));

使用 Formik 组件，使用 onSubmit 定义表单提交逻辑。Formik 组件的内容为一个 Form 元素，使用 Formik 提供的 Field 定义输入控件。最后进行渲染，得到以下的简单表格：

Formik表格例子

我们来看一个复杂一些的例子：

import React from 'react';import { Formik, Form, Field, ErrorMessage } from 'formik';const Basic = () => (  

Any place in your app!

{ const errors = {}; if (!values.email) { errors.email = 'Required'; } else if ( !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email) ) { errors.email = 'Invalid email address'; } return errors; }} onSubmit={(values, { setSubmitting }) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 400); }} > {({ isSubmitting }) => ( Submit )}

);export default Basic;

在这个例子中，我们加入了validate表单验证规则，可以灵活定义表单验证逻辑和错误提示消息。然后，表单内容通过 isSubmitting 控制渲染，其中使用 Formik 的 Field 和 ErrorMessage 对输入控件和错误消息控件进行打包，很方便就能进行抽象层级的控制，极大地简化了表单的设计。

Formik Docs

总结

Formik 作为一个 React 的表单组件库，使得组件构建工作变得简单，其简明的逻辑和组件化抽象的设计思想，使得 React 表单的设计、构建、乃至以之后的维护工作，都变得更为简单，值得使用。