在现代 Web 开发中，表单是最基本的用户输入组件。基于 React 的 @mindhive/forms 这个 npm 包为我们提供了一个易于使用、灵活的表单结构，使我们更容易构建复杂的表单应用程序。
安装 @mindhive/forms
首先，您需要确保您已在项目中安装了 React 和 React-DOM 。如果您还没有安装，可以通过以如下命令方式安装：
npm install react react-dom
接下来，您可以安装 @mindhive/forms 通过如下 npm 命令：
npm install @mindhive/forms
使用 @mindhive/forms
安装 @mindhive/forms 后，让我们试着用它来构建一个简单的登录表单。在您的 React 组件中导入 Form ，Input 和 Button 组件，并将其呈现在 render() 函数中，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ------ ------ - ---- ------------------
----- --------- ------- --------------- -
------------ - -------- -- -
--------------------
-
-------- -
------ -
----- -----------------------------
------ ------------ ---------------- --
------ --------------- --------------- ---------------- --
------- -------------------------
-------
--
-
-在上面的代码中，通过在 handleSubmit() 函数中输出表单输入的值，展示任何逻辑操作，如向用户显示登录消息或重定向到其他页面。
现在，我们已经创建了一个可以使用的基本表单。 @mindhive/forms 还提供了许多其他的输入字段组件，如 TextArea 和 Select ，操作方式与上述示例类似。
当然，很多时候我们需要在表单中加入校验逻辑，让现在的表单更加完善。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ------ ------ - ---- ------------------
----- --------- ------- --------------- -
------------ - -- ------ --------- ---------- -- -- -
------------------ --------- ------------
-
-------- - -- ------ -------- -- -- -
----- ------ - ---
-- -------- ------------ - ---------
-- ----------- --------------- - ---------
------ -------
-
-------- -
------ -
-----
---------------- ----------- ---- --
----------------------------
------------------------
-
------ ------------ ---------------- --
------ --------------- --------------- ---------------- --
------ ----------------- --------------- ----------- --
------- -------------------------
-------
--
-
-现在，表单会自动进行校验，并且会在出错时向用户提供错误消息。validate() 函数返回一个对象，其中键为错误的输入名称，值为错误消息。
总结
@mindhive/forms 简化了表单的开发，并提供了强大且易于扩展的表单结构。使用它使您的表单变得更加简单而强大。
如果您想更详细地了解 @mindhive/forms ，请参阅其官方文档：https://www.npmjs.com/package/@mindhive/forms 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600f81e8991b448ddedc