在 Web 应用中，表单数据是不可避免的一部分。React SPA（Single Page Application，单页应用）开发中，如何优雅地处理表单数据是一个值得深入探讨的问题。本文将介绍一些在 React SPA 中处理表单数据的最佳实践，包括状态设计、受控组件以及表单验证。
状态设计
处理表单数据的首要任务是建立表单的状态。在 React 中，通常会使用组件的状态来存储表单数据。但是，由于表单数据通常比较复杂，过分依赖 React 组件状态可能会使得组件变得难以维护。
因此，我们可以对表单数据设计一个独立的状态对象，并使用 React Hook 来管理。通过这种方式，我们可以将表单数据和组件状态进行分离，减少后者的复杂度。
-- -------------------- ---- -------
------ - -------- - ---- --------
-------- ---------------------- -
----- -------- ---------- - ------------------------
----- ------------ - ----- -- -
----- - ----- ----- - - -------------
----------- ---------- ------- ----- ---
--
----- ------------ - ----- -- -
-----------------------
--------------------
--
------ -
-------
-------------
-------------
--
-
-------- ------------ -
----- - ------- ------------- ------------ - - ---------
--------- ---
--------- ---
---------------- ---
---
------ -
----- ------------------------
-------
---------
------
-----------
---------------
-----------------------
-----------------------
--
--------
-------
---------
------
---------------
---------------
-----------------------
-----------------------
--
--------
-------
------- ---------
------
---------------
----------------------
------------------------------
-----------------------
--
--------
------- ------------------ -----------
-------
--
-在上面的代码中，useForm Hook 用于生成一个表单的状态对象，SignUpForm 组件则使用这个对象来维护表单状态。通过将状态与组件分离，我们可以更方便地管理表单数据。
受控组件
React 中的受控组件是指那些通过绑定 value 和 onChange 属性来控制表单输入的组件。通过使用受控组件，我们可以将表单输入的值映射到状态中，并在状态或表单提交时轻松地访问它们。
以下代码展示了如何在 React SPA 中使用受控组件处理表单数据：
-- -------------------- ---- -------
------ - -------- - ---- --------
-------- ------------ -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ----------------- ------------------- - -------------
----- ------------ - ----- -- -
-----------------------
------------- --------- --------- --------------- ---
--
------ -
----- ------------------------
-------
---------
------
-----------
----------------
--------------- -- --------------------------------
--
--------
-------
---------
------
---------------
----------------
--------------- -- --------------------------------
--
--------
-------
------- ---------
------
---------------
-----------------------
--------------- -- ---------------------------------------
--
--------
------- ------------------ -----------
-------
--
-受控组件可以使得表单数据容易与组件状态相对应，并且在表单验证等时候可以更好地控制表单数据的流向。
表单验证
表单验证是一个在 React SPA 中非常重要的部分。它可以使得表单输入数据更加鲁棒性，并保障数据合法性。
React 处理表单验证的方式通常是在表单提交时对表单数据进行检查，并针对不合法的数据提供错误提示。通常，我们需要使用正则表达式或一些其他的验证库来实现。
以下是一个例子，其中使用 YUP 验证库对表单数据进行验证：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - -- --- ---- ------
----- ------ - --------------------
--------- ------------------------
--------- ------------
-------
---------------------------------------------------
---------------- -------------------
--------------------- ------
---------- ---- ------
--
---
-------- ------------ -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ----------------- ------------------- - -------------
----- ------------ - ----- -- -
-----------------------
----------------- --------- --------- --------------- --------
------ -- -
--------------------
--
------ -- -
----------------------
-
--
--
------ -
----- ------------------------
-------
---------
------
-----------
----------------
--------------- -- --------------------------------
--
--------
-------
---------
------
---------------
----------------
--------------- -- --------------------------------
--
--------
-------
------- ---------
------
---------------
-----------------------
--------------- -- ---------------------------------------
--
--------
------- ------------------ -----------
-------
--
-在上面的例子中，我们使用了 YUP 验证库，定义了一个 schema 对象来验证表单数据。在 handleSubmit 函数中，我们使用 validate 方法来进行验证，如果验证通过，则输出表单数据，否则抛出错误信息。
总结
在本文中，我们探讨了在 React SPA 中处理表单数据的最佳实践，包括状态设计、受控组件以及表单验证。使用这些技术，我们可以轻松地创建健壮的表单，并保障数据的安全性和正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa501748841e9894672e26