- 综合排序
- 最热优先
- 最新优先
- 来自专栏趣谈前端
Formik：让用户体验更加出色的表单解决方案
今天和大家分享一款非常有价值的开源项目——Formik。 下图是 H5-Dooring 表单设计器的截图： 接下来我就和大家一起聊聊Formik 能做什么。 Formik 是什么 Formik 是一个流行的 React 表单库。 可以在终端中运行以下命令：yarn add formik。 引入 Formik：在需要使用 Formik 的组件中，引入 Formik 组件。 可以在组件的进口部分添加以下代码：import {Formik} from 'formik';。 创建 Formik 实例：在组件中创建一个新的 Formik 实例。 以上就是使用 Formik 的基本步骤，我们还可以根据自己的需求进一步配置和扩展 Formik 的功能。
2.4K10编辑于 2024-04-19 - 来自专栏webTower
React 组件优化
Formik 工具库 Formik 库可以让你在 React 中轻松构建出健壮的 Form 表单程序。 <Formik /> 组件比较复杂，在构建 Formik 表单程序时，Formik 和下面它的几个属性是需要设置的： initialValues 接收一个对象，表示初始化的表单控件的值，对象的键应是表单的 formik 代码： import React from 'react'; import { Formik, Form, Field, ErrorMessage } from "formik"; import 使用 Formik + yup 库实现了验证逻辑与组件的解耦，验证逻辑统一由 yup 管理。 相对于 redux-form 库，我觉得 formik 库更好用一些吧。 redux-form 库比较大，压缩后大小为 22.5KB，而 Formik 库为 12.7KB； 关于 formik 的更多用法，可以参考官网： Formik.js[1] yup.js[2] 参考资料
8.8K20发布于 2020-04-27 - 来自专栏前端达人
React 19 Actions:表单开发不再需要useState了?深度解析新范式背后的设计哲学
实战对比:从Formik到React Actions的重构 我们用一个真实案例来对比:一个包含文件上传、实时验证、多步骤的用户注册表单。 重构前(Formik + 自定义Hooks,280行) function RegisterForm() { // 状态管理(40行) const [step, setStep] = useState(1 onChange={formik.handleChange} onBlur={formik.handleBlur} /> {formik.touched.email && formik.errors.email && (
{formik.errors.email})} {/* ...更多字段 */} 如果你现在还在用Formik、React Hook Form,不妨试试React 19 Actions。不是说它们不好,而是时代变了,该用更现代的方式解决老问题了。19310编辑于 2026-03-12 - 来自专栏人工智能应用
React编程新手入门实践教程
6.2 表单验证策略 即时验证：onChange时检查 提交验证：onSubmit时统一检查 第三方库：Formik + Yup组合 // Yup验证模式 const schema = email: Yup.string().email('无效邮箱').required('必填'), password: Yup.string().min(8, '密码过短') }); // Formik 集成 <Formik validationSchema={schema} onSubmit={values => {/* 提交处理 */}} > {({ errors }) => ( <Form> {errors.email &&
{errors.email}} </Form> )} </Formik> 第七章：现代Hooks体系 7.139300编辑于 2025-08-01 - 来自专栏前端从进阶到入院
2023 React 生态系统，以及我的一些吐槽……
Formik 是一个小型库，可以帮助您解决以下三个最令人讨厌的问题： 将值放入和取出表单状态 验证和错误消息 处理表单提交 通过将所有这些放在一个地方，Formik 可以让事情井然有序，使得测试、重构和理解您的表单变得轻而易举 我（@jaredpalmer）在与 @eonwhite 一起构建一个大型内部管理仪表板时编写了 Formik。 Redux-Form 的大小是 22.5 kB（经过最小化和 gzip 压缩），而 Formik 的大小是 12.7 kB。 import React from "react"; import { Formik } from "formik"; const Basic = () => (
Anywhere 此外，Formik 依赖于表单元素，并且在控制 Redux 存储时存在一些挑战。
4.4K30编辑于 2023-10-14来自专栏cc log前端元编程——使用注解加速你的前端开发
Form表单我们使用Formik + Tea Form Component + yup(数据校验)。 Formik 使用React Context来提供表单控件所需的各种方法数据，然后借助提供的Field等组件，你可以很方便的封装你的业务表单组件。 import React, { FC } from 'react' import { Field, Form, Formik, FormikProps } from 'formik'; import { console.log('---send to server', data) props.onClose() },10000) } return ( <Formik formProps.submitForm() }} >Submit</Button> </TeaForm> ) }} </Formik
3.9K20编辑于 2022-09-21来自专栏VTeam技术团队前端元编程——使用注解加速你的前端开发
Form表单我们使用Formik + Tea Form Component + yup(数据校验)。 Formik 使用React Context来提供表单控件所需的各种方法数据，然后借助提供的Field等组件，你可以很方便的封装你的业务表单组件。 import React, { FC } from 'react'import { Field, Form, Formik, FormikProps } from 'formik';import { Form => { console.log('---send to server', data) props.onClose() },10000) } return ( <Formik formProps.submitForm() }} >Submit</Button> </TeaForm> ) }} </Formik
4.2K20发布于 2020-11-23来自专栏程序那些事儿盘点React开发中不可或缺的工具
Formik 表单处理是网页开发经常会遇到的问题，而Formik是一个可以在React中构建表单的组件。
2.3K20编辑于 2023-03-07来自专栏前端桃园2020 年你应该知道的 React 库
以下是一些流行的解决方案: nivo Victory react-vis Recharts Chart Parts React 中的表单库 在 React 中最流行的表单库是 Formik。 建议: Formik React Hook Form React 中的数据获取库 很快，您就必须向远程 API 发出请求，以便在 React 中获取数据。 React Hooks and/or Apollo 路由: React Router 身份验证: Firebase 数据库: Firebase Ui 库: none 或 UI 组件库 表单库: none 或 Formik Node.js 服务 + Passport.js 数据库: 自己用 SQL/NoSQL DB 提供 Node.js 服务 Ui 库: UI 组件库或者您自己的 UI 组件 表单库: none 或者 Formik
18.7K40发布于 2020-02-26来自专栏漫谈测试聊聊如何避免在开发眼中测试就是找茬的
将自动化测试用例作为代码合并的前置条件技术语言对齐掌握基础开发框架（如Spring/React），用开发熟悉的术语描述问题：❌ "点击按钮没反应"✅ "Chrome 89版本下，submit事件未触发Formik
15120编辑于 2025-07-15来自专栏前端达人分享 73 个让你事半功倍的 NPM 包
表格和电子邮件 42、Formik 地址：https://www.npmjs.com/package/formik Formik 是一个流行的 React 和 React Native 开源表单库。
6.8K20编辑于 2022-03-25来自专栏快乐阿超zod
// 等价于 { username: string; age: number } Zod 的生态系统 Zod 的生态系统非常丰富，支持与多种库无缝集成： 表单验证：React Hook Form、Formik
1.3K10编辑于 2025-04-19来自专栏较真的前端React 学习路线图 2018版
·Redux Form iii.MobX 7.类型检查 ○PropTypes ○TypeScript ○Flow 8.表单 ○Redux Form ○Formik
3.2K41发布于 2018-07-31来自专栏前端杂货铺-Gopal【译】73个超棒且可提高生产力的 NPM 包
表单和邮件 42.Formik[65] Formik 是 React 和 React Native 的一个流行开源表单库。它具有易于使用、声明性和适应性的特点。 Validator: https://www.npmjs.com/package/validator [64] Joi: https://www.npmjs.com/package/joi [65] Formik : https://www.npmjs.com/package/formik [66] Multer: https://www.npmjs.com/package/multer [67] Nodemailer
7.4K30发布于 2020-11-10来自专栏前端达人表单也能“路由跳转”？React Router <Form> 真有点东西
只能手动 JS 处理（Constraint API） 这也是为啥很多团队最后还是选择用 React Hook Form 或 Formik。
27500编辑于 2025-07-01来自专栏深度学习与python73个强无敌的NPM软件包
表单与电子邮件 42.Formik Formik 是一款流行的开源表单库，易于使用且具备声明性及自适应性。 项目链接： https://www.npmjs.com/package/formik 43.Multer Multer 是一款 Node.js 中间件，用于处理上传文件中的多部分 / 表单数据。
5.4K10发布于 2020-11-05来自专栏魔术师卡颂一个简洁、强大、可扩展的前端项目架构是什么样的？
urql - GraphQl 表单状态 表单数据需要区分「受控」与「非受控」，表单本身还有很多逻辑需要处理（比如「表单校验」），所以也推荐用专门的库处理这部分状态，比如： React Hook Form Formik
1.4K30编辑于 2022-11-22来自专栏柒八九技术收纳盒回望过去，展望未来- 2024 React 生态一览表
Formik Formik[8] 提供一组工具和组件，使管理表单状态、验证和提交变得容易。使用 Formik 的唯一缺点是它没有维护。 2. zustand/getting-started/introduction [7] RTK Query: https://redux-toolkit.js.org/rtk-query/overview [8] Formik : https://formik.org/docs/tutorial [9] React Hook Form: https://www.react-hook-form.com/get-started/
3.4K10编辑于 2023-11-13来自专栏前端技术江湖你不知道的33个令人惊艳的React开发库
formlink image.png Formik 是世界上最流行的 React 和 React Native 开源表单库。
3.1K20编辑于 2023-08-21来自专栏Mirror的技术成长React入门学习笔记
React文档中也指出React对表单的受控组件处理比较烦杂，而且存在非受控组件；官方给出了推荐[Formik]
3.2K20发布于 2020-12-16
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号