在前端开发中，表单是一个非常重要的组件。而动态表单是指根据用户的输入或者选择，动态地改变表单的内容或者结构。在 React 中，我们可以使用一些技术来快速构建动态表单，本文将介绍其中的一些方法。
使用 state 来动态渲染表单
在 React 中，我们可以使用 state 来存储表单的数据，然后根据 state 的变化来动态渲染表单的内容。例如下面的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------------- -
----- ---------- ------------ - -------------
----- ------------ - ------- -- -
-------------
------------
-------------------- ------------------
---
--
------ -
------
-------
-----
------ ----------- ----------- -------------------- -- --- ----------------------- --
--------
-------
------
------ ------------ ------------ --------------------- -- --- ----------------------- --
--------
------- -----------------------------
-------
--
-在上面的代码中，我们使用 useState 来定义 formData，然后在 input 的 onChange 事件中更新 formData。这样，每次用户输入或者选择时，formData 就会发生变化，从而动态渲染表单的内容。
使用条件渲染来动态改变表单结构
除了动态渲染表单的内容，我们还可以使用条件渲染来动态改变表单的结构。例如下面的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------------- -
----- ------------- --------------- - ----------------
----- ---------- ------------ - -------------
----- ------------ - ------- -- -
-------------
------------
-------------------- ------------------
---
--
----- ------------- - -- -- -
-----------------------------
--
------ -
------
-------
-----
------ ----------- ----------- -------------------- -- --- ----------------------- --
--------
-------
------
------ ------------ ------------ --------------------- -- --- ----------------------- --
--------
------- ------------- ------------------------
------------ - ------ - ------- -------
---------
------------ -- -
--
-------
-------
------ ----------- ------------- ---------------------- -- --- ----------------------- --
--------
-------
-----
------ ----------- ----------- -------------------- -- --- ----------------------- --
--------
---
--
------- -----------------------------
-------
--
-在上面的代码中，我们使用 useState 来定义 showAddress 和 formData，然后在 toggleAddress 函数中更新 showAddress。根据 showAddress 的值，我们使用条件渲染来动态渲染表单的结构。
使用第三方库来快速构建动态表单
除了上面的方法，我们还可以使用一些第三方库来快速构建动态表单。例如 react-jsonschema-form 和 react-dynamic-forms 这两个库都提供了快速构建动态表单的方法。
react-jsonschema-form 基于 JSON Schema 来构建表单，可以快速生成复杂的表单结构。例如下面的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ------------------------
----- ------ - -
------ -------
----- ---------
--------- ----------
----------- -
------ - ----- --------- ------ -------- -------- -- --- ----- --
----- - ----- ---------- ------ -------- -------- ----- -
-
--
-------- ------------- -
----- -------- - -- -------- -- -- -
----------------- ------------ ----------
--
------ ----- --------------- ------------------- ---
-在上面的代码中，我们使用 react-jsonschema-form 来定义 schema，并将其传递给 Form 组件。然后在 onSubmit 函数中处理表单的提交。
react-dynamic-forms 则提供了一个基于 JSON 配置的 API 来构建动态表单。例如下面的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- ----------------------
----- ------ - -
------- -
- ----- ------- ----- ------- ------ ------- --------- ---- --
- ----- -------- ----- -------- ------ -------- --------- ---- --
- ----- --------- ----- --------- ------ --------- -------- -------- --------- --
- ----- ----------- ----- -------- ------ ------ -- ------- --------- ---- -
-
--
-------- ------------- -
----- -------- - ------ -- -
----------------- ------------ ------
--
------ ------------ --------------- ------------------- ---
-在上面的代码中，我们使用 react-dynamic-forms 来定义 config，并将其传递给 FormBuilder 组件。然后在 onSubmit 函数中处理表单的提交。
总结
在 React 中，我们可以使用 state 和条件渲染来快速构建动态表单。同时，也可以使用一些第三方库来快速构建复杂的动态表单。无论使用哪种方法，都需要考虑表单的数据结构和提交方式，以及对用户输入的验证和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e37b101886fbafa4fdf358