在Web开发中，表单是常见的用户输入组件之一。在React中，我们通常使用<form>元素创建表单。当用户提交表单时，我们需要获取表单中的所有数据以便进行后续处理。本文将介绍几种方法来从React表单中获取数据。
基本表单
让我们从一个基本的表单开始：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ----------- -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ------------ - ------- -- -
-----------------------
-------------------- ------
--------------------- -------
--
------ -
----- ------------------------
-------
-----
------ ----------- ------------ ------------- -- ------------------------ --
--------
--- --
-------
------
------ ------------ ------------- ------------- -- ------------------------- --
--------
--- --
------- -----------------------------
-------
--
-
------ ------- ----------这是一个简单的表单，包含一个名称和邮件地址字段。当用户提交表单时，我们将名称和电子邮件日志输出到控制台。
在此示例中，我们使用了useState钩子来定义表单中的状态。我们使用value属性将每个输入字段与其对应的状态变量绑定。每当用户输入内容时，onChange事件处理程序将更新状态变量。
在提交表单时，我们使用handleSubmit函数来处理事件。此函数调用event.preventDefault()以避免默认提交表单的行为。然后，我们将每个输入字段的值作为参数打印到控制台中。
使用Refs
在某些情况下，我们可能需要从表单中获取输入字段的引用。例如，如果我们想在用户点击按钮时聚焦某个输入字段，则需要该引用。
要获取输入字段的引用，请使用React.createRef() API：
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
-------- ---------- -
----- ------- - -------------
----- -------- - -------------
----- ------------ - ------- -- -
-----------------------
-------------------- -----------------------
--------------------- ------------------------
--
------ -
----- ------------------------
-------
-----
------ ----------- ------------- --
--------
--- --
-------
------
------ ------------ -------------- --
--------
--- --
------- -----------------------------
-------
--
-
------ ------- ---------在此示例中，我们使用useRef钩子创建一个引用对象，然后将其分配给每个输入字段的ref属性。在提交表单时，我们可以使用current属性访问引用，并检索输入字段的值。
在父组件中管理表单状态
在某些情况下，我们可能需要在父组件中处理表单的状态。例如，在多个组件之间共享表单数据时。
为此，我们可以将表单状态定义为props并在父组件中处理它：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------------ -
----- ---------- ------------ - ---------- ----- --- ------ -- ---
----- ------------ - ------- -- -
-----------------------
-------------------- ---------------
--------------------- ----------------
--
----- ------------ - ------- -- -
----- - ----- ----- - - -------------
---------------------- -- -- ------------ ------- ----- ----
--
------ -
----- ------------------------
-------
-----
------ ----------- ----------- --------------------- ----------------------- --
--------
--- --
-------
------
------ ------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------