React 表单 Formik 库使用

最新推荐文章于 2023-08-07 22:48:12 发布

拉勾小迷弟

最新推荐文章于 2023-08-07 22:48:12 发布

阅读量400

点赞数

文章标签： react.js javascript

本文链接：https://blog.csdn.net/weixin_43016472/article/details/119796832

版权

本文介绍了如何在 React 中利用 Formik 库进行表单管理和验证，包括基本使用方法、使用 Yup 进行复杂验证、组件化构建表单以及创建自定义复选框控件。通过 Formik 的 useFormik、validationSchema 和 getFieldProps 等特性，简化了表单处理和验证的代码。

摘要由CSDN通过智能技术生成

文章来自拉勾教育大前端高薪训练营

Formik使用笔记

Formik用于增强表单处理能⼒. 简化表单处理流程
官网链接: https://jaredpalmer.com/formik/.

Formik 下载

npm install formik

Formik 基本使用

使用 Formik 的 useFormik 方法配置基本使用方法，方法调用返回 formik 对象，对象存储了表单的方法对对象；需要绑定表单，表单必须要有 name 属性，对应
initialValues 属性

import {
    useFormik } from 'formik'

function App() {
   
	const formik = useFormik({
   
		initialValues: {
   
			username: '张三',
		},
		onSubmit: values => {
   }
	})
	return <form onSubmit={
   formik.handleSubmit}>
		<input type="text" name="username"
		value={
   formik.values.username}
		onChange={
   formik.handleChange}/>
		<input type="submit"/>
	</form>
}

表单验证

在 useFormik 中配置 validate 添加验证逻辑；给表单添加离开焦点事件，使用 formik 的 touched 属性，表示表单发生更改，必须给表单添加 onBlur 事件

function App() {
   
	const formik = useFormik({
   
		initialValues: {
   
			username: '张三',
		},
		validate: values => {
   
			const errors = {
   };
			if(!values.username) errors.username = "请输入用户名";
			return errors;
		},
		onSubmit: values => {
   }
	})
	return <form onSubmit={
   formik.handleSubmit}>
		<input type="text" name="username"
		value={
   formik.values.username}