在 React 中，处理输入框是一个非常常见的需求。本文将介绍几种优雅的方式来处理输入框。
受控组件
受控组件是指将表单元素的值绑定到 React 组件的 state 上，然后通过 onChange 事件来更新 state。这样做的好处是可以在 state 中保存表单元素的值，并在需要时更新它。下面是一个示例代码：
-- -------------------- ---- -------
----- ----- ------- --------------- -
----- - -
------ --
-
------------ - ------- -- -
--------------- ------ ------------------ ---
-
-------- -
------ -
------ ----------- ------------------------ ---------------------------- --
--
-
-在这个示例中，我们将 input 的值绑定到组件的 state 上，并在 handleChange 事件中更新 state。这样，每次用户输入时，组件的 state 都会更新，并且 input 的值也会更新。
非受控组件
非受控组件是指表单元素的值不受 React 组件 state 的控制，而是由 DOM 自身维护。这种方式比较适合简单的表单元素，例如单选框和复选框。下面是一个示例代码：
-- -------------------- ---- -------
----- -------- ------- --------------- -
----------- - ------------------
----------- - -- -- -
----- --------- - ---------------------------------
-----------------------
-
-------- -
------ -
------ --------------- ---------------------- -------------------------- --
--
-
-在这个示例中，我们使用 ref 来获取 input 元素，并在 handleClick 事件中获取 input 的 checked 属性来获取复选框是否被选中。
高阶组件
高阶组件是指一个函数，它接收一个组件作为参数，并返回一个新的组件。我们可以使用高阶组件来增强组件的功能。下面是一个示例代码：
-- -------------------- ---- -------
-------- -------------------- -
------ ----- ------- --------------- -
----- - -
------ --
-
------------ - ------- -- -
--------------- ------ ------------------ ---
-
-------- -
------ -
---------- ------------------------ ---------------------------- --
--
-
-
-
----- ----- ------- --------------- -
-------- -
------ -
------ ----------- ------------------------ ------------------------------ --
--
-
-
----- ------------- - -----------------在这个示例中，我们使用 withInput 高阶组件来增强 Input 组件的功能。我们将 Input 组件中的 state 和 handleChange 方法放到高阶组件中，并将它们作为 props 传递给 Input 组件。这样，我们就可以在 Input 组件中使用 state 和 handleChange 方法了。
结论
以上是 React 中处理输入框的几种优雅的方式。受控组件是最常见的方式，而非受控组件适用于简单的表单元素。高阶组件可以使我们的组件更加灵活和可复用。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6765693a76af2b9a20ec7b97