在开发 React 单页应用时，表单是很常见的元素。然而，在使用 React 来处理表单时，我们经常会遇到表单数据丢失的情况。
这个问题可能是因为 React 在重新渲染组件时将表单重置为初始状态，或者是因为使用了 uncontrolled 的组件，导致其值无法保留。
以下是解决这个问题的一些方法和技巧，以及对它们的深入探讨。
方法一：使用 controlled 的组件
当使用 controlled 的组件时，其值会与组件状态进行同步，并且可以轻松地将表单数据存储在 React 组件的状态中。
例如，考虑以下代码片段：
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
------ --
--
----------------- - -----------------------------
----------------- - -----------------------------
-
------------------- -
----- - ----- ----- - - -------------
---------------
------- -----
---
-
------------------- -
-----------------------
------------------------
-
-------- -
------ -
----- -----------------------------
-------
-----
------
-----------
-----------
-----------------------
----------------------------
--
--------
-------
------
------
------------
------------
------------------------
----------------------------
--
--------
------- -----------------------------
-------
--
-
-在这个例子中，我们将 <input /> 组件变为 controlled 组件，它们的值都从组件状态中获取。每次用户编辑表单时，我们将更新组件状态并同步 <input /> 的值。最终，表单数据将存储在组件状态中，并可以通过 handleSubmit() 方法进行提交。
这种控制方式的好处是，我们能够随时访问表单数据，并且当表单被重置时，表单数据不会丢失。然而，这种方式需要付出更多代价，需要编写更多的代码，并且为每个表单元素添加onChange方法。
方法二：使用 Hooks
Hook 是 React 16.8 引入的一个新特性，它可以简化 React 代码并提高代码的可读性。
可以使用useState钩子来实现这一点。 例如：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- -------- -
----- ------ -------- - -------------
----- ------- --------- - -------------
-------- ------------------- -
-----------------------
----------------- -------
-
------ -
----- ------------------------
-------
-----
------
-----------
------------
------------- -- ------------------------
--
--------
-------
------
------
------------
-------------
------------- -- -------------------------
--
--------
------- -----------------------------
-------
--
-使用 useState 钩子可以获得上述控制方式的好处，同时不需要编写类组件。此外，使用钩子可以避免在组件中使用样板代码，从而使代码更加简洁易读。
方法三：使用 React Context API
React 的 context API 可以在组件树中共享状态并使其更加可靠和易于访问。
例如，在以下代码片段中，我们使用 createContext() 方法创建一个“表单上下文”，该上下文包含表单数据和与表单数据相关的两个方法：handleChange() 和 handleSubmit()。
-- -------------------- ---- -------
----- ----------- - ---------------------
----- ---
------ ---
------------- -- -- ---
------------- -- -- --
---
-------- -------- -
----- ------ -------- - ---------- ----- --- ------ -- ---
-------- ------------------- -
----- - ----- ----- - - -------------
------------------- -- --
-------------
------- -----
----
-
-------- ------------------- -
-----------------------
------------------
-
------ -
---------------------
-------- -------- ------------- ------------ --
-
----- ------------------------
-------
-----
------
-----------
-----------
-----------------
-----------------------
--
--------
-------
------
------
------------
------------
------------------
-----------------------
--
--------
------- -----------------------------
-------
-----------------------
--
-在此示例中，我们使用 useState 钩子来存储表单数据，并使用 createContext() 方法创建一个上下文来将表单数据和处理表单数据的方法传递给其他组件。我们还在组件的render() 方法中使用FormContext.Provider来将上下文提供给其子元素。
这种控制方式需要编写更多的代码，但如果您需要在更大的组件树中使用表单数据，则会产生很大的好处。
总结
React 是一个强大而灵活的库，可用于处理各种类型的应用程序。但是，随着应用程序变得越来越大和复杂，处理表单数据问题可能会变得困难。
本文介绍了一些常见的解决方案，如 controlled 组件，Hooks 和 React 上下文，以帮助您更轻松地管理表单数据。equalTo, 如果您正在构建 React 应用程序并遇到了表单数据丢失的问题，请尝试使用这些技术并看看它们是否能够为您节省时间和代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f93a2df6b2d6eab30cacb2