React 是一个非常流行的前端框架，它提供了一种简单而强大的方式来构建交互式用户界面。在 React 中处理表单数据提交是一个非常常见的任务，本文将介绍如何在 React 中处理表单数据提交。
表单组件
在 React 中，表单可以使用以下组件来构建：
- form：表示一个表单，包含多个表单元素。
- input：表示一个文本输入框。
- select：表示一个下拉列表。
- textarea：表示一个多行文本输入框。
- button：表示一个按钮。
这些组件可以通过 React 的 props 属性来控制它们的行为和外观。
处理表单数据提交
在 React 中，处理表单数据提交通常有两种方式：使用受控组件和非受控组件。
受控组件
受控组件是指表单元素的值由 React 组件的状态控制。当用户输入数据时，React 组件的状态会更新，从而更新表单元素的值。当用户提交表单时，React 组件可以读取表单元素的值并将其发送到服务器。
以下是一个使用受控组件处理表单数据提交的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------------- -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- --------- ----------- - -------------
----- ------------ - ------- -- -
-----------------------
------------- ----- ------ ------- ---
--
------ -
----- ------------------------
-----
------ ----------------------------
------
-----------
---------
------------
----------------- -- ----------------------------
--
------
-----
------ ------------------------------
------
------------
----------
-------------
----------------- -- -----------------------------
--
------
-----
------ ----------------------------------
---------
------------
---------------
----------------- -- -------------------------------
--
------
------- -----------------------------
-------
--
-在上面的代码中，我们使用 useState hook 来管理表单元素的值。handleSubmit 函数会在用户提交表单时被调用，它会阻止表单的默认行为，然后将表单元素的值打印到控制台中。
非受控组件
非受控组件是指表单元素的值由 DOM 自身控制。当用户输入数据时，表单元素的值会直接更新到 DOM 中。当用户提交表单时，React 组件需要从 DOM 中读取表单元素的值并将其发送到服务器。
以下是一个使用非受控组件处理表单数据提交的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- -
----- ------------ - ------- -- -
-----------------------
----- ---- - ---------------------------------
----- ----- - ----------------------------------
----- ------- - ------------------------------------
------------- ----- ------ ------- ---
--
------ -
----- ------------------------
-----
------ ----------------------------
------ ----------- --------- --
------
-----
------ ------------------------------
------ ------------ ---------- --
------
-----
------ ----------------------------------
--------- ------------ --
------
------- -----------------------------
-------
--
-在上面的代码中，我们使用 event.target.elements 来获取表单元素的值。handleSubmit 函数会在用户提交表单时被调用，它会阻止表单的默认行为，然后将表单元素的值打印到控制台中。
总结
在 React 中处理表单数据提交是一个非常常见的任务。本文介绍了如何使用受控组件和非受控组件来处理表单数据提交，并提供了示例代码。希望本文能够对你学习 React 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66013c78d10417a222c671f7