随着用户需求不断变化，开发人员常常需要实现动态表单，以便用户可以根据自己的需求来定制表单的内容。在 React 中，我们可以使用组件化的思想来实现一个可动态添加和删除表单项的表单组件。
1. 组件结构设计
在组件的结构设计上，我们可以将表单组件分为两个组件：表单项组件和表单组件。表单项组件是可重复使用的，包含表单项的所有逻辑。表单组件是整个表单的容器，包含添加和删除表单项的逻辑。
2. 表单项组件
表单项组件需要包含以下内容：
- 表单项的值
- 表单项的类型
- 表单项的标签
- 表单项的验证规则
以下是一个简单的文本框表单项组件的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- --------- ------- --------------- -
------ --------- - -
------ ----------------------------
------ ----------------------------
--------- --------------------------
--------------- ---------------------------
-
------------ - ------- -- -
----------------------------------------
-
-------- -
----- - ------ ------ -------------- - - -----------
----- ----- - ----------------------
------ -
-----
----------------------
------ ----------- ------------- ---------------------------- --
------ -- -------------------
------
--
-
-
------ ------- ----------该组件接收四个 prop：
- label: 表单项的标签
- value：表单项的值
- onChange：表单项的值变化时的回调函数
- validationRule：表单项的验证规则函数
其中，validationRule 函数返回表单项的验证结果，如果验证通过则返回 null，否则返回错误信息。
3. 表单组件
表单组件需要包含以下内容：
- 表单项的类型
- 表单项的初始值
- 表单项的验证规则
- 添加和删除表单项的逻辑
- 提交表单的逻辑
以下是一个简单的表单组件的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ --------- ---- --------------
----- ---- ------- --------------- -
------ --------- - -
----------- ---------------------------
--------- -------------------------
-
----- - -
------- ------------------------------- -- --
----- -----------
------ ------------
------ ------------
--------------- --------------------
---
-
------------ - ------------ ------ -- -
----- ------ - -----------------------
------------------------ - ------
--------------- ------ ---
-
-------------- - -- -- -
----- ------ - -----------------------
-------------
----- -------
------ ---
------ ---
--------------- -- -- ----
---
--------------- ------ ---
-
----------------- - ------------ -- -
----- ------ - -----------------------
------------------------- ---
--------------- ------ ---
-
------------ - ------- -- -
-----------------------
----- ---------- - ---
--------------------------------- ------ -- -
----------------- - ------------
---
--------------------------------
-
-------- -
----- - ------ - - -----------
------ -
----- -----------------------------
------------------- ------ -- -
---- ------------
----------- --- ------ -- -
----------
-------------------
-------------------
----------------- -- ------------------------ -------
-------------------------------------
--
--
------- ------------- ----------- -- ------------------------------------------
------
---
------- ------------- -----------------------------------------
------- -------------------------
-------
--
-
-
------ ------- -----该组件接收两个 prop：
- formFields：表单项的配置数组，每个数组项包含表单项的类型、标签、初始值和验证规则
- onSubmit：表单提交时回调的函数，接受表单值对象作为参数。
4. 使用示例
以下是一个使用示例的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ---------
----- ---------- - -
-
----- -------
------ -----
------ ---
--------------- ------- -- -
-- -------- -
------ -----
-
-- ------------- - -- -
------ ----------
-
-- ------------- - --- -
------ -----------
-
------ -----
-
--
-
----- -------
------ -----
------ ---
--------------- ------- -- -
-- -------- -
------ -----
-
-- ------------------------------------------- -
------ ------------
-
------ -----
-
--
-
----- -------
------ -----
------ ---
--------------- ------- -- -
-- -------- -
------ -----
-
-- ------------------------- -
------ ------------
-
------ -----
-
-
--
----- --- ------- --------------- -
------------ - ------------ -- -
------------------------
-
-------- -
------ -
----- ----------------------- ---------------------------- --
--
-
-
------ ------- ----该示例使用了一个包含三个表单项的表单，分别为姓名、邮箱和电话号码。其中，姓名和邮箱是必填的并且需要符合一定的格式，电话号码可以为空，但如果填写则需要符合一定的格式。
5. 总结
通过以上的实例，我们可以发现组件化的思想可以很好地帮助我们实现动态表单，并且可以方便地重用表单项组件。同时，表单项的验证规则函数也可以很好地与表单项组件解耦，使得我们可以更灵活地定义验证规则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ff04748841e9894c4ca6c