在 React 应用中，我们经常需要通过 inputs、selects、textareas 等元素来获取用户输入。当我们需要对这些元素的值进行控制时，我们通常会使用 Controlled Components。该方法的原理是将元素的值绑定到 React 组件的 state 上，并通过 onChange 事件更新 state 的值。
为了简化 Controlled Components 的创建过程，开发者们在 npm 上推出了许多相应的包。其中，react-controlled 是一个非常方便的包，它提供了一个高阶组件，能自动将组件的 props 匹配到其 state，并使应用程序变得更加可控。
在本文中，我们将介绍如何使用 npm 包 react-controlled 来创建 Controlled Components，以及如何在应用程序中使用这些组件。
安装 react-controlled
首先，我们需要通过 npm 包管理器来安装 react-controlled。在终端中，进入项目文件夹，然后运行以下命令：
npm install --save react-controlled
使用 react-controlled
安装完成后，我们需要使用 react-controlled 包中的 withControllableProps 高阶组件来创建 Controlled Components。
在本文中，我们将创建两个组件：一个是 input 组件，另一个是 select 组件。
input 组件
首先，创建一个新的 input 组件并将其作为 Controlled Component。在该组件中，我们将使用 props.value 和 props.onChange 来替代原生的 value 和 onChange 属性。
import { withControllableProps } from 'react-controlled';
const ControllableInput = withControllableProps('input')('value', 'onChange');
const Input = (props) => {
return <ControllableInput {...props} />;
};现在，我们可以使用 Input 这个组件将其嵌套在其他组件中，并将其 props 传递给 ControllableInput 组件。这样，我们就能够在父组件中控制 input 组件的 value 和 onChange 属性了。
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
--
-
------------ - ------- -- -
--------------- ------ ------------------ ---
-
-------- -
------ -
-----
------ ------------------------ ---------------------------- --
------
--
-
-select 组件
接下来，我们使用同样的方法来创建 select 组件。
-- -------------------- ---- -------
------ - --------------------- - ---- -------------------
----- ------------------ - ---------------------------------------- ------------
----- ------------------ - ---------------------------------------- ------------
----- ------ - ------- -- -
----- - --------- -------- ------- - - ------
------ -
------------------- ----------
--------------- ------ ----- -- -- -
------------------- ----------- --------------
-------
---------------------
---
---------------------
--
--在 Select 组件中，我们首先创建了一个 ControllableSelect 组件，该组件使用 withControllableProps 函数并指定了 value 和 onChange 属性。然后，我们创建了一个 ControllableOption 组件，它继承了 value 和 children 属性。
最后，我们将 options 作为 Select 组件的 props 传递，它们将会作为 ControllableOption 组件的 children。
现在，我们可以像这样使用 Select 组件：
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------ ----
--
-
------------ - ------- -- -
--------------- ------ ------------------ ---
-
-------- -
------ -
-----
------- ------------------------ ---------------------------- ----------
- ------ ---- ------ ------- -- --
- ------ ---- ------ ------- -- --
- ------ ---- ------ ------- -- --
-- --
------
--
-
-结论
在本文中，我们学习了如何使用 npm 包 react-controlled 来创建 Controlled Components。该包提供了一个高阶组件，能够自动将组件的 props 匹配到其 state 上，并通过 onChange 事件更新 state 的值。
我们创建了 input 和 select 组件，并展示了如何在应用程序中使用这些组件。这样，我们就可以非常方便地创建更加可控的 React 应用程序。
此外，我们还提供了一些示例代码，希望能帮助你更好地理解 react-controlled 包的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555b581e8991b448d2cf4