React-Formish 是一个用于构建 React 表单的 npm 包，它使用简单，灵活且易于扩展。在这篇文章中，我们将介绍如何使用 React-Formish 来创建表单，并说明 React-Formish 的核心概念和用法，以及我们如何利用它来使表单交互更加智能。
安装 React-Formish
要使用 React-Formish，您需要使用 npm 在终端中安装它。在您的 React 项目中打开终端，并输入以下命令：
npm install react-formish
这将为您的项目添加 React-Formish 的 npm 包以及其依赖。
使用 React-Formish 创建表单
让我们假设您需要创建一个包含三个字段的表单：姓名、邮箱和出生日期。以下是创建该表单的代码示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ----- ----- - ---- ---------------
----- ------ ------- --------- -
-------- - -------- -- -
------------------- -- ---------
-
-------- -
------ -
----- -------------------------
------ ----------- ---------- --
------ ------------ ---------- --
------ ---------- ------------ ----------- --
------- ---------------------------
-------
-
-
-在此示例中，我们首先导入 Form 和 Field 组件。Form 组件是 React-Formish 的入口点，它负责渲染表单和收集表单数据并将其传递给调用者提供的回调。Field 组件是表单中每个字段的渲染器，它构建一个带有标签和输入框的表单控件，并将 api 传递给 Form 组件收集数据。
接下来，我们创建一个名为 MyForm 的 React 类组件，该组件渲染了一个 Form 元素，并将 onSubmit 函数作为其属性传递。该函数用于处理表单提交事件并输出表单当前状态下的值。 最后，我们在 Form 元素中添加三个 Field 元素，它们分别代表名字，电邮和出生日期，在每个 Field 元素上设置了一个 name 和 label 属性，并在 dob 字段的 type 属性上设置了值为 date，这告诉 Field 组件渲染一个日期输入框。
React-Formish 的表单验证和提交
默认情况下，React-Formish 不执行任何表单验证。当您提交表单时，无论表单当前的状态是否是合法的，处理函数都会被调用。因此，我们需要为我们的表单添加一些验证。 当表单被提交时，需要执行验证的方法为 {valid} = this.props，此方法将在 Form 中使用 onValidate 属性调用，onValidate 是回调验证函数。
以下是改进后的示例代码：
-- -------------------- ---- -------
----- ------ ------- --------- -
---------- - -------- -- -
----- ------ - --
-- -------------- -
----------- - -------
-
-- --------------- -
------------ - -------
- ---- -- ------------------------------------ -
------------ - ---------
-
-- ------------- -
---------- - ---------
- ---- -
----- ----------- - --- ------
----- ------- - --- ----------------
-- ------------ - -------- -
---------- - ---------
-
-
------ ------ -- --------------
-
-------- - -------- -- -
------------------- -- ---------
-
-------- -
------ -
----- ------------------------ -----------------------------
---- ------------------
------ -----------------------------
------ ----------- --------- ------------------- --
----------------------- -- -
---- ------------------------------------------------
--
------
---- ------------------
------ ------------------------------
------ ------------ ---------- ------------ ------------------- --
------------------------ -- -
---- -------------------------------------------------
--
------
---- ------------------
------ ------------------------------
------ ---------- -------- ----------- --
---------------------- -- -
---- -----------------------------------------------
--
------
------- ---------------------------
-------
-
-
-在此代码中，当表单被提交时，验证函数 onValidate 将调用。 onValidate 接收收集到的表单数据的值作为参数。在此示例中，我们执行一些基本验证，例如确保用户名和电子邮件地址已填写，电子邮件地址格式正确，出生日期有效等，并将所有错误放入 errors 对象中。由于 errors 对象为空，因此 React-Formish 将表单状态判定为已通过验证，可以向后调用 onSubmit 函数。
我们还更新了 render 函数代码。在它里面，我们使用 this.props.errors 来呈现表单错误消息，并在每个字段声明下添加一个 div 元素，用于按规定的格式和样式呈现错误消息。 如果表单 onValidate 验证执行时，表单错误对象进入 this.props.errors，导致 this.props.errors.{name(email/dob)} 是true. 然后这个验证的错误消息呈现告知用户表单的问题。
总结
React-Formish 是一个非常好用的 npm 包，它为 React 表单组件提供了灵活的构建方式，具备简单的扩展性且可以轻松集成验证。通过利用本文讲解的 React-Formish 提供的各种功能和函数，我们可以轻松构建复杂的表单，并为组件添加交互性。
完整的 React-Formish 示例代码可以从 https://github.com/jondot/react-formish 得到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b6c