如果你是一个前端开发人员，并且经常需要开发输入框组件，那么你或许已经使用过一些出色的 npm 包了。如果你还没有使用过 @barebone/component-text-input 这个 npm 包，那么本篇文章就带给你详细的使用教程和深入的指导意义。
什么是 @barebone/component-text-input
@barebone/component-text-input 是一个基于 React 的输入框组件，它提供了一些非常实用的功能，比如：实时输入框验证、密码/文本开关、清除按钮、提示信息等等。它的使用非常简单，只需要在项目中安装并导入后，即可直接使用。
安装 @barebone/component-text-input
如果你正在使用 npm 或 yarn，那么你可以通过以下命令来安装该组件：
# npm npm install @barebone/component-text-input # yarn yarn add @barebone/component-text-input
使用 @barebone/component-text-input
安装完成后，你就可以在项目中导入 @barebone/component-text-input 组件并使用了。下面是一个基本的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- ---------------------------------
-------- ----- -
----- ------- --------- - -------------
----- ------------ - --- -- -
-------------------------
--
------ -
-----
----------
-------------
-----------------------
---------------
--
------
--
-
------ ------- ----上述示例中，我们使用了 @barebone/component-text-input 组件，并将其包裹在 div 标签中。我们将该组件的 value 和 onChange 属性设置为一个本地状态 variable 和 handleChange 函数，以使其可以实时更新输入的文本。我们还给这个输入框添加了一个 label 属性，以提供输入框的标签名称。
使用实时验证器
@barebone/component-text-input 提供了一个非常实用的实时验证器，该验证器可以帮助我们实时验证用户输入的数据是否合法。下面是一个示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- ---------------------------------
-------- ----- -
----- ------- --------- - -------------
----- ------- --------- - ---------------
----- ------------ - --- -- -
-------------------------
-- -------------
-- ----------------------- -
-------------------
- ---- -
---------------
-
--
------ -
-----
----------
-------------
-----------------------
-------------
-------------
--
------
--
-
------ ------- ----上述代码中，我们在 handleChange 函数中设立了一个实时验证器，这个验证器检查输入的数据是否为数字，如果不是，我们就给组件的 error 属性设置一个非空值，在输入框下面呈现一个错误消息。
使用密码开关
有时，我们需要用户输入密码，因此可以使用 @barebone/component-text-input 的密码开关功能。下面是一个示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- ---------------------------------
-------- ----- -
----- -------------- ---------------- - ----------------
----- ---------- ------------ - -------------
----- -------------------- - -- -- -
-------------------------------
--
----- ------------ - --- -- -
----------------------------
--
------ -
-----
----------
----------------
------------------ - ------ - -----------
-----------------------
-------------
---------------------
------------------------------
---------------------------------------
--
------
--
-
------ ------- ----上述代码中，我们使用了组件的密码开关属性，该属性将密码文本变成普通文本（并且切换回来），以允许用户查看输入。我们还使用了 onPasswordToggle 属性，该属性将允许我们创建一个句柄函数来处理密码开关的点击事件。
使用提示信息
最后，我们还可以使用提醒信息功能向用户提供额外的信息。下面是一个示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- ---------------------------------
-------- ----- -
----- ------- --------- - -------------
----- ------------ - --- -- -
-------------------------
--
------ -
-----
----------
-------------
---------------
--------------
--------------
-----------------------
--
------
--
-
------ ------- ----上述代码中，我们在组件中添加了一个 hint 属性，提示用户输入数据的限制。我们还将 maxLength 属性设置为 10，以限制用户输入的最大字符长度。
结论
@barebone/component-text-input 组件是能提供极好功能性的一个 npm 包，它给我们带来了一个包含各种输入框功能的稳定的React组件。我们可以根据需要灵活使用这些功能，并通过调整选项来自定义样式和行为。这要求我们在开发输入框组件时借鉴，并在此基础上进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e081e8991b448d3bca