在前端开发中，表单是必不可少的组件之一。而如何优雅地处理表单数据，是每个前端开发者面临的一个难题。这时，我们可以使用一些成熟的 npm 包来解决这个问题。react-formal-inputs 就是其中一个常用的 npm 包。今天，我们来学习如何使用它。
什么是 react-formal-inputs？
react-formal-inputs 是一个基于 React 的表单库，它提供了一组高度可定制的表单组件和表单验证规则。
相比于其他表单库，react-formal-inputs 的不同点在于它使用了 FormalizedInput 这个组件作为表单的基本元素。而 FormalizedInput 使用的设计模式是“受控组件”。也就是说，所有用户的输入都由表单的拥有者来控制，而不是直接在页面上修改值。这种设计可以更加方便地控制表单的状态和数据流动。
安装
我们可以通过 npm 来安装 react-formal-inputs。
npm install react-formal-inputs
快速入门
使用 react-formal-inputs 可以非常方便地定义表单组件和验证规则。下面，我们通过一个简单的示例来了解如何快速入门。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- - ---- ----------------------
----- ---------------- - -
----- -
--------- -----
--
---- -
------------- -
------------ -----
------------ --
------------------ ----
--
--
--
----- ------ ------- --------------- -
------------- -
--------
---------- - -
--------- ---
--
-
------------ - -- -- -
---------------------------------
--
---------------- - -------- -- -
--------------- -------- ---
--
-------- -
----- - -------- - - -----------
------ -
-----
----------------
--------------------------------
----------------------------
-----------------------------------
-
------ ----------- ---------- ----------------- --
------ ---------- ---------- ----------------- ------------- --
------- -------------------------
-------
--
-
-在上面的代码中，我们通过 Form 组件来定义表单，并通过一个名为 validationSchema 的对象来定义表单的验证规则。其中，validationSchema 的键是表单的字段名，值是一个对象，用于定义该字段的验证规则。
然后，我们通过 Field 组件来定义每个表单字段的具体表现形式。其中，name 属性对应了 validationSchema 中的键，label 属性为表单字段添加了一个 label，component 属性表示该表单字段对应的组件类型，其他的属性会被传递给 component 标签。
最后，我们在表单中添加了一个提交按钮。当点击提交按钮后，通过回调函数 handleSubmit，我们可以拿到表单中所有的数据。
自定义表单组件
react-formal-inputs 作为一个灵活的表单库，允许用户自定义表单组件。下面的代码展示了如何自定义一个日期选择组件。
-- -------------------- ---- -------
----- ------------ ------- --------------- -
------------ - - -- -
------------------------------------
--
-------- -
----- - ------ ----- - - -----------
------ -
-------
--------
------ ----------- ------------- ---------------------------- --
--------
--
-
-
---------------------- - -
------ -----------------
--------- ---------------
------ -----------------
--
----- ------ - -- -- -
------ -
------
------ --------------- ------------ ------------------------ --
-------
--
--在上面的代码中，我们定义了一个名为 MyDatePicker 的组件。在 MyForm 中，我们通过 Field 组件将 MyDatePicker 作为组件类型传递，从而实现了自定义表单组件的功能。
总结
react-formal-inputs 是一个优秀的表单库，它提供了一组高度可定制的表单组件和验证规则。在实际开发中，使用 react-formal-inputs 可以让我们更加方便地处理表单数据。此外，react-formal-inputs 支持自定义表单组件，可以在一定程度上提高代码的复用性和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196385