formik
概述
- 使用
formik
配合yup
可以快速帮助我们实现表单校验并提示错误信息
// 安装
npm install formik --save
// 在页面中引入
import { Form, Field, withFormik, ErrorMessage } from “formik”
- 官网地址:formik
基本使用
FORM
formik
的Form
组件是围绕原生form
标签的小包装,可以快速的重置表单或提交表单- 使用 组件替代原生的标签
- 并且使用
withFormik
高阶组件来包装你所写的那个组件 -
// withFormik组件被调用是传入的组件才是被包装的组件 // withFormik组件接收一个配置对象,来处理被包装的表单 Demo = withFromik({ // 表单内部数据 mapPropsToValues: () => ({ username: '', password: '' }), // 表单被提交时触发该函数 handleSubmit:(value,{ props})=>{ // 从value中可以获取到mapPropsToValues中的值 const { username,password