终极反应 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>
简单的 <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 是更好的选择。它满足了我们与表单处理相关的所有要求。它是最受欢迎和我个人最喜欢的库。它还提供了他们官方网站上的示例代码，所以我们不需要在外面寻求帮助
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
