React-formik、yup基本使用方法（建议收藏）

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