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

小鱼儿 2023-02-18 03:19 43阅读 0赞

## formik ##

### 概述 ###

*  使用`formik`配合`yup`可以快速帮助我们实现表单校验并提示错误信息

> // 安装
> 
> npm install formik --save

> // 在页面中引入
> 
> import \{ Form, Field, withFormik, ErrorMessage \} from “formik”

*  官网地址：[formik][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0R0X21hbg_size_16_color_FFFFFF_t_70_pic_center]

### 基本使用 ###

#### 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)

[formik]: https://jaredpalmer.com/formik/docs/api/withFormik
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0R0X21hbg_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200615203141628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0R0X21hbg==,size_16,color_FFFFFF,t_70#pic_center
[yup]: https://www.npmjs.com/package/yup