本文将介绍如何使用 npm 包 react-bhy-textfield 制作前端表单。
什么是 react-bhy-textfield
react-bhy-textfield 是一个基于 react 的表单控件，它包含文本框、下拉框、日期选择框等多种类型的表单元素。它具有以下特点：
- 可高度自定义样式和事件处理方式
- 支持静态和动态数据源
- 简化了表单的校验和提交过程
- 支持国际化
安装和使用 react-bhy-textfield
安装 react-bhy-textfield 很简单，只需要在终端中执行以下命令：
npm install react-bhy-textfield --save
安装完成后，我们就可以在代码中引入它了：
import TextField from 'react-bhy-textfield'
接下来，我们通过一个示例代码来演示如何使用 react-bhy-textfield 制作一个简单的表单：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ --------- ---- ---------------------
----- ------ ------- --------- -
----- - -
----- ---
---- ---
------- --
-
------------ - ------ ------ -- -
---------------
------- -----
--
-
------------ - -- -- -
-----------------------
-
-------- -
------ -
-----
----------
----------
-----------
-----------------------
----------------------------
--
----------
----------
----------
----------------------
----------------------------
--
----------
----------
-------------
-------------------------
----------------------------
----------
- ------ ---- ------ ------ --
- ------ ---- ------ -------- -
--
--
------- ---------------------------------------
------
-
-
-
------ ------- ------在上述代码中，我们定义了一个 MyForm 组件，它包含了三个 TextField 组件和一个提交按钮。每个 TextField 组件都有一个 label 和一个 name 属性，分别用于显示字段名称和唯一标识字段。其中，第三个 TextField 组件还有一个 options 属性，用于指定下拉框的选项列表。
在 MyForm 组件中，我们定义了三个 state 属性，分别对应三个表单字段的值。在 handleChange 方法中，我们使用 ES6 的 computed property names 语法来更新对应的 state 属性。在 handleSubmit 方法中，我们将当前的 state 属性打印到控制台上。
高级用法
在实际开发中，我们往往需要对表单进行更加复杂的处理，例如校验、联动、动态数据源等。在 react-bhy-textfield 中，我们提供了丰富的 API 来支持这些需求。
校验
react-bhy-textfield 允许我们对表单元素进行校验，以保证用户输入的数据符合我们的需求。我们可以通过在 TextField 组件的 props 中指定 validator 函数来实现校验。validator 函数接收表单元素的值作为参数，应当返回一个布尔值来表示校验是否通过。
-- -------------------- ---- -------
----- ------ ------- --------- -
----- - -
----- ---
---- ---
------- --
-
---------- - -
----- ----- -- ------------------- - --
---- ----- -- ------------------- -- ----- - - -- ----- -- ---
-
------------ - ------ ------ -------- -- -
---------------
------- -----
--
-
------------ - -- -- -
-----------------------
-
-------- -
------ -
-----
----------
----------
-----------
-----------------------
--------------------------------
----------------------------
--
----------
----------
----------
----------------------
-------------------------------
----------------------------
--
------- ---------------------------------------
------
-
-
-在上述代码中，我们在 MyForm 组件中定义了一个 validators 对象，它包含了 name 和 age 两个表单元素对应的 validator 函数。在 TextField 组件的 props 中，我们通过 validator 属性来指定对应的校验函数。在 handleChange 方法中，我们新增了一个 isValid 参数，它表示当前输入是否符合校验规则。
联动
在有些情况下，我们需要使一个表单元素的值受到另一个表单元素的影响，例如下拉框的选项列表可能需要根据另一个下拉框的选项动态生成。在 react-bhy-textfield 中，我们可以通过使用 valueResolver 和 optionsResolver 两个函数来实现联动效果。
-- -------------------- ---- -------
----- ------ ------- --------- -
----- - -
--------- ---
----- --
-
-------------------- - ------ ------ -- -
---------------
--------- ------
----- --
--
-
--------------- - -
----- -- -- -
----- - -------- - - ----------
-- --------- --- ----- -
------ -
- ------ ------ ------ ---- --
- ------ ------ ------ ---- -
-
- ---- -- --------- --- ----- -
------ -
- ------ ------- ------ ---- --
- ------ ------ ------ ---- -
-
- ---- -
------ --
-
-
-
-------- -
------ -
-----
----------
----------
---------------
---------------------------
------------------------------------
----------
- ------ ----- ------ ---- --
- ------ ----- ------ ---- -
--
--
----------
----------
-----------
-----------------------
---------------------- ------ -- ----- -- -----------------------------
--------------------------------------
----------------------------
--
------
-
-
-在上述代码中，我们在 MyForm 组件中定义了一个 optionsResolver 对象，它包含了 city 表单元素对应的 optionsResolver 函数。optionsResolver 函数应当返回一个数组，用于生成选项列表。
在 TextField 组件的 props 中，我们通过 valueResolver 属性将 city 表单元素的值与它所依赖的 province 表单元素的值关联起来。optionsResolver 属性用于指定生成选项列表的函数。
结语
通过学习本文，你应该已经掌握了基于 react-bhy-textfield 制作前端表单的方法，并了解了一些高级技巧。react-bhy-textfield 的强大功能给我们开发表单带来了极大的便利性，同时也让我们更加注重表单的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a2e81e8991b448d7d05