React 是一个流行的前端开发框架，它允许开发人员以可重用组件的形式编写 Web 应用程序。在许多 Web 应用程序中，处理用户输入是至关重要的，因为它可以实现用户交互，使应用程序更加动态和实用。这篇文章将介绍如何在 React 中处理用户输入，提供深入的指导和示例代码。
表单输入
最常见的用户输入形式是表单输入。表单输入将输入字段组成为一个表单，并允许用户提交数据。在 React 中，可以使用 <form> 元素和表单输入组件来处理表单输入。
受控组件
在 React 中，表单输入组件可以是受控组件或非受控组件。受控组件是指，组件的值由 React 组件的状态控制。当用户输入时，React 组件的状态会相应地更新。受控组件使开发人员能够控制表单输入的值，并根据需要进行验证或预处理。以下示例演示如何在 React 中创建受控组件来处理表单输入：
------ ------ - -------- - ---- --------
-------- ----------- -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ------------ - ------- -- -
-----------------------
------------------ --------------- -----------
--
------ -
----- ------------------------
------ ----------------------------
------ ----------- --------- ------------ ----------------- -- ---------------------------- --
------ ------------------------------
------ ------------ ---------- ------------- ----------------- -- ----------------------------- --
------- -----------------------------
-------
--
-
------ ------- ----------在此示例中，我们使用 useState 钩子来创建两个状态变量， name 和 email。我们将它们分别作为输入字段 <input> 的值，并在用户输入时使用 onChange 事件处理函数更新状态。当用户单击 <button> 提交按钮时，handleSubmit 函数将被调用，并将表单数据作为字符串打印到控制台上。
非受控组件
非受控组件是指，组件的值由 DOM 控制。在这种情况下，开发人员只需在组件中设置默认值，表单输入值的更新由浏览器控制。虽然非受控组件在处理大量用户输入时更有效率，但对于任何需要在输入值更新时执行实时验证和处理的场景，受控组件更为理想。如果你需要使用非受控组件，那么可以使用以下示例：
------ ----- ---- --------
-------- ----------- -
----- -------- - ------------------
----- ------------ - ------- -- -
-----------------------
------------------ ----------------------------
---------------------
--
------ -
----- ------------------------
------ ----------------------------
------ ----------- --------- -------------- --------------- --
------- -----------------------------
-------
--
-
------ ------- ----------在此示例中，我们使用 React.createRef() 创建了一个指向 <input> 元素的引用，并将其传递给了组件属性中。当用户单击 <button> 提交按钮时，handleSubmit 函数将被调用，然后通过引用 inputRef.current.value 获取表单数据，并将其传递给控制台。要重置表单，请使用 event.target.reset() 方法。
处理事件
在 React 中，用户交互通常是通过事件来实现的。以下是在 React 中处理事件的示例：
------ ------ - -------- - ---- --------
-------- -------- -
----- ------- --------- - ------------
----- ----------- - -- -- -
-------------- - ---
--
------ -
-----
------ ------- --- ------ ------- ----------
------- --------------------------- -----------
------
--
-
------ ------- -------在此示例中，我们使用 useState 钩子创建了一个状态变量 count，并将其设置为 0。我们使用 handleClick 函数来处理点击事件，并在每次单击时将 count 增加 1。最后，在 <button> 元素上使用 onClick 属性将 handleClick 函数绑定到单击事件上。
结论
在 React 中，处理用户输入是至关重要的，因为它使应用程序更加实用和动态。本文介绍了如何在 React 中处理表单输入和事件，包括如何创建受控和非受控组件，并提供了示例代码。希望这篇文章能为您提供有关如何在 React 中处理用户输入的深入指导和帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66efefe36fbf9601973161a6