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} = value
  		// props就是react中的this.props,可以实现路由跳转
  		props.history.go(-1)
  	}
  })(Demo)
  

Field

• Field组件就是原生input标签的小包装
• 通过withFormik高阶组件进行包装后，通过在Field上设置name属性，便可以获取到mapPropsToValues中定义的数据，当然名字得要一致

• 
    <Form>
    	<Field
    		// 类名
    		className="input"
    		// mapPropsToValues中的键名
    	name="username"
    	placeholder="请输入账号"
  	 />
    </Form>
  
  

ErrorMessage

• ErrorMessage组件是一个错误提示组件，当表单提交，校验不通过时会提示用户
• ErrorMessage组件必须添加name属性，来绑定要校验的属性

• // name属性为mapPropsToValues中键名
  // component属性为提示信息是由什么标签显示
  <ErrorMessage name="username" component="div" className="error" />
  

yup

概述

• Yup是一个用于值解析和验证的JavaScript模式生成器
• Yup的API受Joi的启发很大，但更为精简，并以客户端验证作为主要用例而构建
• npm地址：yup

// 安装

npm install yup --save

基本使用

	// 导入
	import * as yup from 'yup'	
	// 定义校验规则
	let schema = yup.object().shape({
		// name的值为字符串
		name: yup.string(),
		// age的值为数字，最小18
  	age: yup.number().min(18),
	});

	schema.cast({
  	name: 'jimmy',
  	age: '24'
	})

formik与yup配合使用

		Demo = withFromik({
		//  表单内部数据 
		mapPropsToValues: () => ({ username: '', password: '' }),
		// 表单被提交时触发该函数 
		handleSubmit:(value,{props})=>{
			// 从value中可以获取到mapPropsToValues中的值
			const {username,password} = value
			// props就是react中的this.props,可以实现路由跳转 
			props.history.go(-1)
		},
		// 表单校验规则,在表单失去焦点时会自动触发
		validationSchema: yup.object().shape({
			// yup必须先规定数据类型才能添加其他的配置，matches可以用来匹配正则校验规则
			username: yup.string().trim().required("请输入用户名").matches(/^[a-zA-Z_\d]{5,8}$/,"长度为5到8位，只能出现数字、字母、下划线"),
    		password: yup.string().trim().required("请输入密码").matches(/^[a-zA-Z_\d]{5,12}$/,"长度为5到12位，只能出现数字、字母、下划线")
		})
	})(Demo)