前言
formik-simple 是一个免费、开源、简易的 React 表单处理库，可用于减轻 React 应用中表单处理的负担。它同时支持本地验证、异步验证、同步提交、异步提交等功能。本文将为您介绍这个 npm 包的基本使用方法。
安装
使用 npm 进行安装：
npm install formik-simple
或使用 yarn 进行安装：
yarn add formik-simple
基本用法
导入 Formik 包：
import Formik from "formik-simple";
使用 Formik 来包裹包含表单元素的组件：
-- -------------------- ---- -------
-------
---------------- ------ --- --------- -- --
---------------- -- -
----- ------ - ---
-- --------------- -
------------ - -----------
- ---- -- -
--------------------------------------------------------------
- -
------------ - -------- ----- ---------
-
-- ------------------ -
--------------- - -----------
- ---- -- ----------------------- - -- -
--------------- - ----- -- - ---------- -- ------
-
------ -------
--
------------------ - ------------- -- -- -
------------- -- -
---------------------------- ----- ----
---------------------
-- -----
--
-
---
-------
-------
--------
-------------
-----------
-------------
-------------
-- -- -
----- ------------------------
------ --------------------- ---------------
------
------------
------------
-----------------------
-------------------
--------------------
--
------------- -- ------------- -- -------------
------ -----------------------------------
------
---------------
---------------
-----------------------
-------------------
-----------------------
--
---------------- -- ---------------- -- ----------------
------- ------------- ------------------------
------
---------
-------
--
---------详细说明
initialValues
initialValues 是表单输入的默认值。它应该是一个对象，其中每个属性都表示一个表单输入元素。
validate
validate 方法是对表单输入值进行验证的函数，它返回一个错误对象。 当表单被提交时，Formik 将调用此方法。
onSubmit
onSubmit 方法是表单提交时的回调函数。它应该是一个函数，它将表单输入值作为第一个参数，并且有一个可选的 setSubmitting 函数作为第二个参数，它可以使表单处于“提交”状态。
values
values 是一个对象，它包含组件中表单输入的当前值。每当发生 onChange 事件时，它都将被更新。
errors
errors 是一个对象，它包含了每个表单输入元素的错误消息。当验证失败时，validate 方法将更新它。
touched
touched 是一个对象，它表示每个表单输入元素是否已被触摸。当表单提交或验证失败时，它将被更新。
handleChange
handleChange 是一个处理 onChange 事件的函数。当任何表单输入元素值发生变化时，它将被调用。
handleBlur
handleBlur 是一个处理 onBlur 事件的函数。当表单输入元素失去焦点时，它将被调用。
handleSubmit
handleSubmit 是一个处理 onSubmit 事件的函数。当提交表单时，它将被调用。
isSubmitting
isSubmitting 是一个 boolean 值。当表单处于“提交”状态时，它将为 true。
示例代码
下面是一个完整的例子，它使用了 Formik 包装的 Login 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------
----- ----- - -- -- -
------ -
-----
--------------
-------
---------------- ------ --- --------- -- --
---------------- -- -
----- ------ - ---
-- --------------- -
------------ - -----------
- ---- -- -
--------------------------------------------------------------
- -
------------ - -------- ----- ---------
-
-- ------------------ -
--------------- - -----------
- ---- -- ----------------------- - -- -
--------------- - ----- -- - ---------- -- ------
-
------ -------
--
------------------ - ------------- -- -- -
------------- -- -
---------------------------- ----- ----
---------------------
-- -----
--
-
---
-------
-------
--------
-------------
-----------
-------------
-------------
-- -- -
----- ------------------------
------ --------------------- ---------------
------
------------
------------
-----------------------
-------------------
--------------------
--
------------- -- ------------- -- -------------
------ -----------------------------------
------
---------------
---------------
-----------------------
-------------------
-----------------------
--
---------------- -- ---------------- -- ----------------
------- ------------- ------------------------
------
---------
-------
--
---------
------
--
--
------ ------- ------总结
formik-simple 是一个非常实用的 React 表单处理库，它可大大减轻 React 应用中表单处理的负担。在本文中，我们介绍了 npm 包的安装方法、基本用法和详细说明，并给出了一个实际的例子。使用 formik-simple，您可以更轻松地编写 React 表单，并避免许多错误和不必要的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668481e8991b448e2ae0