简介
@davidbabel/formik 是一个类似于 React 的表单库，它的特点是避免了 React 在表单验证上的繁琐和重复。在使用 @davidbabel/formik 前，我们需要对 React 有一个基本的了解。
安装
--- ------- ------------------ ------
使用
基本使用
------ ----- ---- --------
------ - ------- ----- ----- - ---- ---------------------
----- --------- - -- -- -
------ -
------- ---------------- ------ -- -- ------------------ -- ---------------------
------
------ -----------------------------
------ ------------ ------------------ ---- ------ ------------ --
------- -----------------------------
-------
---------
--
--
------ ------- ----------在上面的代码中，我们使用了 <Formik> 和 <Form>，<Field> 组件。<Formik> 组件是整个表单的根组件，它接收两个 prop：initialValues 和 onSubmit。<Form> 组件用来包裹所有的表单元素，它会自动处理表单提交事件，不需要手动对表单设置提交事件。
<Field> 组件对应表单元素的输入，比如文本框、下拉框、单选框和复选框等。
高级用法
表单验证
我们可以使用 Yup（一个 JavaScript 对象模式的验证器库） 来进行表单验证。在我们的表单组件里，添加 validationSchema 属性。
------ ----- ---- --------
------ - ------- ----- ----- - ---- ---------------------
------ - -- --- ---- ------
----- ---------------- - ------------
------ --------------------------- ----- -------------------------------
---
----- ------------- - -- -- -
------ -
------- ---------------- ------ -- -- ----------------------------------- ------------------ -- ---------------------
------
------ -----------------------------
------ ------------ ------------------ ---- ------ ------------ --
------- -----------------------------
-------
---------
--
--
------ ------- --------------表单联动
我们可以使用 FieldArray 组件对表单元素进行分组。例如，假设我们有一个包含多个地址的表单，每个地址包含收件人、电话和地址等字段。我们可以使用 FieldArray 来组织表单结构。
------ ----- ---- --------
------ - ------- ---------- - ---- ---------------------
------ - -- --- ---- ------
----- ---------------- - ---------------
------------
----- ----------------------------------
------ ----------------------------------
-------- ----------------------------------
--
--
----- ----------- - -- -- -
------ -
------- ---------------- ---------- -- -- ----------------------------------- ------------------ -- ---------------------
--- ------ -- -- -
------ -
--
----------- -----------------
--- ------- ---- -- -- -
-----
------------------------- ------ -- -
---- ------------
------------- ------- - ---------
------ -------------------------------- ------------------ --
------ --------------------------------- ------------------- --
------ ----------------------------------- --------------------- --
------- ------------- ----------- -- ---------------
------ -------
---------
------
---
------- ------------- ----------- -- ------ ----- --- ------ --- -------- -- ----
--- -------
---------
------
--
-------------
------- -----------------------------
---
--
--
---------
--
--
------ ------- ------------总结
@davidbabel/formik 简化了表单操作，让表单验证、提交和联动更加便捷。它可以极大地减少开发者的工作难度，在 React 项目中使用，可以提高开发效率，并减少错误的发生。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5a51ab1864dac66f64