介绍
React-Input-Hints 是一个有用的 React 插件，可以大大提高用户输入表单时的体验。它会根据用户输入的内容，显示匹配的提示，并通过高亮显示使这些提示更容易被注意到。React-Input-Hints 旨在实现智能提示，使用户对正确的输入更有信心。
安装
安装 React-Input-Hints 有两种方式，可以直接在项目中使用 npm 安装，也可以将其下载到本地并手动添加到项目中。
使用 npm 安装：
--- ------- ----------------- ------
手动下载：
从 https://github.com/chriscerami/react-input-hints/releases 下载最新版本，然后将 dist/react-input-hints.js 复制到你的项目中并在 HTML 文件中引用它。
---- - ---- ----- --- ------- --------------------------------------------
使用
在 React 组件中使用 React-Input-Hints 很简单，只需要将其引入，然后将其包含在表单输入中。例如：
------ ---------- ---- --------------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----------- ---
------ ------- ------- -------- --------- ---------
--
-
------------------- -
-------------------------- ---------------------
-
-------- -
------ -
----------- -----------------------------
----------------- -- -------------------------
--------------------------
--
-
-在这个例子中，我们只需要传入一个 value、onChange 和 hints 参数。React-Input-Hints 会在输入框中显示提示字符串列表中与当前输入内容匹配的字符串。
深度探讨
React-Input-Hints 并不涉及任何复杂的逻辑，它只是以一种有用的方式显示了提示。 然而，它的思路非常有启发意义，可以让我们从中学到很多。
React-Input-Hints 将互动输入与辅助提示结合起来，使其变得更易于使用并且更智能。提示是实时反馈的一种形式，可以帮助用户更快地了解整个流程并简化输入过程，这也是一种将交互与用户体验融合的方式。
React-Input-Hints 还能帮助我们更快地反馈用户输入的内容。它会在用户输入的同时，快速响应并给出可能性提示，从而让用户对表单输入的正确性更有信心。
示例代码
------ ---------- ---- --------------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----------- ---
------ ------- ------- -------- --------- ---------
--
-
------------------- -
-------------------------- ---------------------
-
-------- -
------ -
----------- -----------------------------
----------------- -- -------------------------
--------------------------
--
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005725f81e8991b448e88ad