使用 react-easy-forms 轻松构建表单-JavaScript中文网-JavaScript教程资源分享门户

react-easy-forms 是一个开源的 npm 包，旨在简化前端开发人员构建表单时的繁琐和重复性工作。本文介绍了如何使用 react-easy-forms 创建表单，并提供了具体的示例代码和深入探讨如何使用它进行高级表单构建和自定义。

安装和配置

安装 react-easy-forms 非常简单，只需要在项目中运行以下命令：

npm install react-easy-forms --save

然后在使用表单的组件中导入它：

import React from 'react';
import { Form, Field } from 'react-easy-forms';

基本用法

react-easy-forms 提供了 <Form> 和 <Field> 两个组件。<Form> 组件是表单的容器，所有表单元素都应该包含在其中。<Field> 组件是表单元素本身，每个组件都对应一个输入框或其他表单元素。

下面是一个简单的例子：

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- - ---- -------------------

----- ------ ------- --------- -
  ------------------ -
    -------------
    ---------- - -
      --------- ---
      --------- --
    --
  -

  ------------ - ----- -- -
    -----------------------
    ------------------------- ------------
  --

  -------- -
    ------ -
      ----- -----------------------------
        -------
          ------------------------
          ------
            -----------
            ---------------------------
            --------------- -- --------------- --------- ------------------ ---
          --
        --------
        -------
          ------------------------
          ------
            ---------------
            ---------------------------
            --------------- -- --------------- --------- ------------------ ---
          --
        --------
        ------- -----------------------------
      -------
    --
  -
-

------ ------- -------

这个表单有两个输入框，一个用于输入用户名，一个用于输入密码。当用户提交表单时，handleSubmit 方法将在控制台中打印出表单的状态。<Field> 组件可以包含任何表单元素，例如 input、textarea 和 select 等等。

表单验证

react-easy-forms 提供了内置的表单验证功能，它可以确保用户已经填写了所有必填字段，并验证 email、电话号码和其他常见类型。验证错误会被自动检测并在页面上显示。

添加验证

要在表单中添加验证，只需要在 <Field> 组件中传递一个验证函数作为属性。例如：

<Field
  name="email"
  validate={value => (value && value.includes('@') ? null : 'Invalid email address')}
>
  <label>Email address:</label>
  <input type="email" />
</Field>

上面的例子包含了一个名为 email 的输入框，并定义了一个验证函数来检查输入是否包含 @ 符号。如果检测失败，Field 组件将在元素下方显示一个红色错误信息。

验证函数应该接受当前表单元素的值作为参数，如果值有效，则返回 null，否则返回一个字符串，该字符串是错误提示信息。

显示验证结果

要在页面上显示验证结果，需要在 <Form> 组件上添加一个 errors 属性，该属性将一直保存当前表单中所有错误的验证结果。例如：

<Form onSubmit={this.handleSubmit} errors={this.state.errors}>
  {/* ... */}
</Form>

当 <Field> 组件中的验证失败时，react-easy-forms 会在该组件周围渲染一个包含错误信息的 div。如果禁用了这种默认行为，可以使用 getChildErrorElement 覆盖该行为。

内置验证工具

react-easy-forms 还提供了一些应用程序级别的验证规则。要使用内置的验证工具，只需在 <Field> 组件中设置特定的验证器即可。例如：

<Field validations={['required', 'email']}>
  <label>Email address:</label>
  <input type="email" />
</Field>

上述代码将应用两个验证规则：

required：确保输入框中有值。如果没有值，则显示错误。
email：确保输入为有效的电子邮件地址。

react-easy-forms 还提供了其他验证规则，如 url、phone、number、password 等。

高级表单构建和自定义

虽然 react-easy-forms 可以处理基本的表单构建和验证，但该库也允许开发人员使用更高级的技巧和自定义。以下将举例说明以下几点：

继承 `<Form>` 和 `<Field>` 组件

开发人员可以继承 <Form> 和 <Field> 组件以使其更适合特定用例的需求。例如，你可能需要在同一表单中使用两个不同的验证库。为此，可以为另一个库编写自定义 Form 组件，该组件将导入 react-easy-forms 的 <Form> 组件并在其内部添加其他功能。

使用高阶组件

react-easy-forms 还允许开发人员使用高阶组件（HOC）来公共的功能，例如控制表单元素和提交按钮的状态。

自定义表单元素

要为特定用例创建自定义表单元素，可以编写新的 <Field> 组件。可以将自定义组件包装在 <Field> 组件中以在表单中使用它。

渲染自定义错误元素

为了更好的控制在表单中呈现验证错误，开发人员可以重写 <Field> 组件的 getChildErrorElement 方法以提供自定义的错误显示。

总结

react-easy-forms 帮助开发人员轻松构建复杂的表单，并提供了内置的验证规则和自定义选项。使用这个灵活的库能够大大简化前端表单处理的工作，使开发人员可以更专注于业务代码的实现。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e07b4

使用 react-easy-forms 轻松构建表单