前端|Formik使用教程以及开发中遇到的问题 react.js|formik|ant|design|React

Formik 笔记

一、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} )} ); 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 }) => ( )} ); 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对象，里面包含表单里面的处理方法等。 【前端|Formik使用教程以及开发中遇到的问题】原因：未写 initialValues，Formik将值存储在initialValues中。
二、官方链接