一、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 = () => (
   <div>
     <h1>Anywhere in your app!</h1>
     <Formik
       initialValues={{ email: '', password: '' }}
       validate={values => {
         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 */
       }) => (
         <form onSubmit={handleSubmit}>
           <input
             type="email"
             name="email"
             onChange={handleChange}
             onBlur={handleBlur}
             value={values.email}
           />
           {errors.email && touched.email && errors.email}
           <input
             type="password"
             name="password"
             onChange={handleChange}
             onBlur={handleBlur}
             value={values.password}
           />
           {errors.password && touched.password && errors.password}
           <button type="submit" disabled={isSubmitting}>
             Submit
           </button>
         </form>
       )}
     </Formik>
   </div>
 );
 
 export default Basic;

However, to save you time, Formik comes with a few extra components to make life easier and less verbose: <Form />, <Field />, and <ErrorMessage />. They use React context to hook into the parent <Formik /> state/methods.

（二）官方案例進階寫法：

按照官方說法，上述案例可以更加縮減，直接使用標簽，使用React的背景關系傳遞父組件的 state 或者方法：

 import React from 'react';
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 
 const Basic = () => (
   <div>
     <h1>Any place in your app!</h1>
     <Formik
       initialValues={{ email: '', password: '' }}
       validate={values => {
         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 }) => (
         <Form>
           <Field type="email" name="email" />
           <ErrorMessage name="email" component="div" />
           <Field type="password" name="password" />
           <ErrorMessage name="password" component="div" />
           <button type="submit" disabled={isSubmitting}>
             Submit
           </button>
         </Form>
       )}
     </Formik>
   </div>
 );
 
 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 (
     <form onSubmit={formik.handleSubmit}>
     {...}
 	 </form>
 )}

開發中遇到的問題：

原因： 未寫 initialValues，Formik將值存盤在initialValues中，

二、官方鏈接

1. npm庫地址
2. Formik 官網