首页 > 其他分享> 文章详细

终极反应 Formik 指南

2022-09-07 08:34:05 阅读：202 来源： 互联网

标签：Formik 指南 formik 验证表单用于使用终极

终极反应 Formik 指南

Formik Features in React

F ormik 是最流行的用于 React 和 React Native 表单处理的开源库

甲酸有许多特性使这个库更强大

不需要任何 useState
易于学习和使用
简单的表格处理
自定义表单验证
自动保存表格
动态字段
错误信息
条件逻辑
数组字段
i18n 支持

安装。

安装甲酸使用这个命令

 npm 安装表单 ## 使用纱线  
 纱线添加形式

安装后，您无需在应用程序中配置任何内容，只需开始使用 . 首先您需要从 fromik 导入 formik

 从“formik”导入{ Formik }；

然后你可以开始在任何文件中使用这个组件。导入后你可以开始使用 formik 处理表单。

Code of my first time using Formik

这是我第一次在我的代码中使用 Formik 时的代码，看起来我错过了一些东西。Formik 主要组件不足以处理表单 Formik 提供了许多有用的组件，让您的生活更加轻松

Formik 的有用组件

 从“formik”导入{字段、表单、错误消息}； Form // 表单是 HTML 的小包装器<form>  
 简单的 <Form/>  
   
 看起来像 <form onReset={formikProps.handleReset} onSubmit=formikProps.handleSubmit} {...props} /> ..................................................... ... Field // 字段是 HTML 的包装器<input>但它使用名称属性来调用所有主要的输入字段道具 <Field name="first_name"/> 看起来像 <input name="first_name" onChange={handleChange}  
 value={values.first_name} onBlur={handleBlur} /> ..................................................... ... ErrorMessage // ErrorMessage 是我们在 Formik 中使用表单验证时呈现错误消息的组件 <ErrorMessage name="first_name"/> 看起来像 {errors.first_name &&touched.first_name ？ (<div> {errors.first_name}</div> ） ： 无效的 }

Formik 使用 Yup 库来处理高级验证。Yup 也是与 formik 一起使用的最流行的库，用于在表单中进行自定义验证

 npm 我是的 ## 使用纱线  
 纱线添加是的

如您所见，我们创建了一个对象名称“SignupSchema”您的问题是我们在 Formik 中调用该对象的位置

 <Formik  
 validationSchema={SignupSchema} // 你可以在 formik validationSchema props 中使用这个对象  
 />

如您所见，您可以使用 yup 分配任何类型的验证，它还拥有巨大的社区支持，因此如果您遇到困难或想要更多东西，您可以轻松获得帮助

使用使用状态。

我们主要使用“useState”来处理表单中的单个字段。在 fomrik 你可以使用 初始值 作为 **** 一个对象，它也返回具有插入值的相同对象

 要在 formik 中初始化值，我们使用 Initial Values  
          
 常量注册值 = {  
 名：””，  
 姓：””，  
 电子邮件：””  
 }  
 并打电话  
 <Formik  
 初始值={注册值}  
 onSumbit = {(值) => {  
 控制台.log（值）； // values 是一个类似的对象  
 // 带有插入值的注册值  
 }}  
 >

Formik 提供了一些用于表单的内置道具。这些是您可以在表单中使用的多种道具，但我可以告诉您一些重要的道具

values →如果输入，则返回带有数据的initialValues对象
handleSubmit → 用于在按钮上提交表单
handleChange → 用于改变只有 name 属性的输入值
handleBlur →用于跟踪输入是否被触摸
handleReset → 用于在调用时重置所有表单
setFieldValue → 用于自定义字段值（主要用于图像文件）
触摸→如果输入被触摸则返回true
错误→根据yup/自定义验证显示验证错误

结论

Formik 用于许多现实世界的应用程序中，许多开发人员更喜欢 formik 进行简单到简单的表单处理。它有巨大的社区支持，所以我们说 formik 是更好的选择。它满足了我们与表单处理相关的所有要求。它是最受欢迎和我个人最喜欢的库。它还提供了他们官方网站上的示例代码，所以我们不需要在外面寻求帮助

本文链接：https://www.qanswer.top/22012/08490708

标签：Formik,指南,formik,验证,表单,用于,使用,终极
来源： https://www.cnblogs.com/amboke/p/16663980.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

终极反应 Formik 指南

终极反应 Formik 指南

安装。