Formik使用教程以及开发中遇到的问题

一、Formik的概念与理解

Formik是一个小型库。由React组件和hooks组成，它内置了表单的state管理操作，同时使用了Context，能够让表单组件多层嵌套，不再需要一层层传递。
它的底层是ant design的组件。
安装：npm install formik --save 或 yarn add formik

（一）官方案例初步写法：

主要属性：initialValues（必须，否则会出现错误），validate，onSubmit等。
案例是一个邮箱、密码框的情景。
我们可以从中看出自定义校验如何规定、errors 如何设置错误提示信息。

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

     
Anywhere 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);
       }}
     >
       {({
         values,
         errors,
         touched,
         handleChange,
         handleBlur,
         handleSubmit,
         isSubmitting,
         /* and other goodies */
       }) => (
         

           
           {errors.email && touched.email && errors.email}
           
           {errors.password && touched.password && errors.password}
           
             Submit
           
         
       )}
     
   
 );
 
 export default Basic;

However, to save you time, Formik comes with a few extra components to make life easier and less verbose:

, , and . They use React context to hook into the parent state/methods.

（二）官方案例进阶写法：

按照官方说法，上述案例可以更加缩减，直接使用标签，使用React的上下文传递父组件的 state 或者方法：

 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;

initialValues（必须，否则会出现错误），validate，onSubmit这些属性的值可以提取为变量，在外面写，如下：

const initialValues = {
       firstName: '',
       lastName: '',
       email: '',
};

const validate = values => {
   const errors = {}; 
   if (!values.firstName) {
     errors.firstName = 'Required';
   } else if (values.firstName.length > 15) {
     errors.firstName = 'Must be 15 characters or less';
   } 
   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;
 };
 
 const onSubmit = values => {
       alert(JSON.stringify(values, null, 2));
 };

const SignupForm = () => {
   const formik = useFormik({
     initialValues,
     validate,
     onSubmit,
   });
   return (
     

     {...}
 	 
 )}

开发中遇到的问题：

1. values 获取不到表单的值。拿到的是一个Object对象，里面包含表单里面的处理方法等。

原因： 未写 initialValues，Formik将值存储在initialValues中。

二、官方链接

1. npm库地址
2. Formik 官网