hi, 大家好,我是徐小夕, 今天又到了我们的博学时间。今天和大家分享一款非常有价值的开源项目——Formik。
这款开源项目也是我研究零代码搭建平台——H5-Dooring
时参考的项目之一,它可以提高表单渲染引擎的性能和效率,构建出性能更加优秀的表单设计器。下图是 H5-Dooring
表单设计器的截图:
接下来我就和大家一起聊聊Formik 能做什么。
Formik 是一个流行的 React
表单库。目前在 github
上已经有近 34k
的 star
,已广泛被各大公司使用,如:
Formik
被用于 Airbnb
的一些项目中,包括其网站和移动应用程序。Formik
来构建其云服务的用户界面。NASA
使用 Formik
来创建一些项目的表单,例如其太空探索计划的任务管理系统。Formik
简化了 React
应用程序中表单的开发。它提供了一系列功能和特性,使创建、管理和验证表单变得更加容易, 如:
接下来就大家一起来了解学习一下这个开源库,如果想研究的也可以参考它的开源地址:
github: https://github.com/jaredpalmer/formik
以下是使用 Formik
的基本步骤:
yarn add formik
。import {Formik} from 'formik';
。const formik = useFormik();
。<Formik.Field name="username" type="text" />
。<Formik.Field name="username" type="text" validate={value => value.length > 3} />
。<button type="submit" onClick={formik.handleSubmit}>提交</button>
。以上就是使用 Formik
的基本步骤,我们还可以根据自己的需求进一步配置和扩展 Formik 的功能。
代码案例:
import React from 'react';
import { Formik, Form, Field } from 'formik';
export const NestedExample = () => (
<div>
<h1>Social Profiles</h1>
<Formik
initialValues={{
social: {
facebook: '',
twitter: '',
},
}}
onSubmit={values => {
// same shape as initial values
console.log(values);
}}
>
<Form>
<Field name="social.facebook" />
<Field name="social.twitter" />
<button type="submit">Submit</button>
</Form>
</Formik>
</div>
);
Formik
应用场景包括:
Formik 的核心实现原理是通过将表单的状态和逻辑分离,使开发者能够更轻松地管理和验证表单数据。
Formik 提供了一组工具和组件,帮助开发者构建表单,并处理表单的提交、验证和错误处理等功能。
其核心组件包括:
后续我也会使用它实现表单引擎,并集成到我的开源项目 next-admin
中,供大家参考:
github: https://github.com/MrXujiang/next-admin
如果大家有任何问题或想法,请随时留言与我分享。