终极反应 Formik 指南

终极反应 Formik 指南

Formik Features in React

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

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

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

安装。

安装 甲酸 使用这个命令

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

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

从“formik”导入{ Formik }；

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

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

Formik 的有用组件

从“formik”导入{字段、表单、错误消息}； Form // 表单是 HTML 的小包装器

简单的

看起来像 <form onReset={formikProps.handleReset} onSubmit=formikProps.handleSubmit} {...props} /> ..................................................... ... Field // 字段是 HTML 的包装器但它使用名称属性来调用所有主要的输入字段道具 看起来像 ..................................................... ... ErrorMessage // ErrorMessage 是我们在 Formik 中使用表单验证时呈现错误消息的组件 看起来像 {errors.first_name &&touched.first_name ？ (

{errors.first_name}

） ： 无效的 }

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 是更好的选择。它满足了我们与表单处理相关的所有要求。它是最受欢迎和我个人最喜欢的库。它还提供了他们官方网站上的示例代码，所以我们不需要在外面寻求帮助

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

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