简介
@tkloht/react-bootstrap-typeahead 是一个优秀的前端组件，它使用了 React 和 Bootstrap，支持自动补全和多选，适用于多种场景，比如搜索、电商等等。
安装
在项目中使用此组件之前，需要在命令行中输入以下命令：
npm install @tkloht/react-bootstrap-typeahead
或者用 Yarn：
yarn add @tkloht/react-bootstrap-typeahead
使用
接下来我们来看看如何在 React 项目中使用这个组件。
引入样式
首先，需要在你的 React 应用程序的 index.js 或者 App.js 上引入样式表：
import 'bootstrap/dist/css/bootstrap.min.css'; import '@tkloht/react-bootstrap-typeahead/css/Typeahead.css';
渲染组件
接下来，在你的组件中使用它：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- - ---- ------------------------------------
------ ------- -------- ----- -
----- ---------- ------------ - -------------
----- ------- - -
-------
-------
--------
------------
---------
----------
--
------ -
----------
--------------------
---------------
--------
----------------------
-----------------
-------------------
--
--
-这里我们简单的定义了一个带有 useState 钩子的函数组件，其中 Typeahead 组件是其中一个元素。我们还为其添加了一些属性：
id：万无一失的去重 ID，让您可以为其添加任何 HTML 属性labelKey：输入每个选项时用来呈现标签文本的属性multiple：是否允许选择多个选项onChange：当选项更改时调用的回调函数options: 备选项selected：当前已选的选项
这些属性选项中的每一个都是必备的，要理解使用这些属性的背后的原因，可以查看官方文档。
此外，当您需要在项目中使用大量自定义属性时，可以在 options 数组的每个对象中使用它们。例如，您可以定义一个选项对象的数组，其中每个对象都包含 id 和 name 属性。您可以设置 id，并在选择选项时使用它来维护更多的状态，从而定义一个复杂的选择器。
const options = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Mike' },
{ id: 3, name: 'Sally' },
{ id: 4, name: 'Johnathan' },
{ id: 5, name: 'Mickey' },
{ id: 6, name: 'Salvador' }
];高级选项
@tkloht/react-bootstrap-typeahead 还提供了许多有用的选项，例如设置延迟搜索、设置搜索清空符号、设置不区分大小写等。
以下是常见的高级选项：
clearButton
比较常用的选项之一，它使得选择列表指示器的右侧显示一个小的、将自定义清空函数绑定到单击事件的清空按钮。
<Typeahead
clearButton
id="option-1"
labelKey="name"
onChange={setSelected}
options={options}
selected={selected}
/>defaultSelected
预先将特定选项添加到选择列表中。
-- -------------------- ---- ------- ----- ----------------- - --------- ---------- ----------------------------------- ------------- --------------- ---------------------- ----------------- ------------------- --
delay
延迟搜索，通过将 delay属性设置为大于0的数字，可以在用户键入搜索词时设置延迟。这使得应用程序更具有响应性，并减少网络请求延迟。
<Typeahead
delay={500}
id="option-3"
labelKey="name"
onChange={setSelected}
options={options}
selected={selected}
/>ignoreDiacritics & ignoreCase
这两个选项都控制搜索的大小写和音调。将这些选项设置为 true 将忽略输入的所有这些差异。
-- -------------------- ---- ------- ---------- ------------- ---------- ---------------- --------------- ---------------------- ----------------- ------------------- --
paginate
这个选项允许在搜索结果中限制可以呈现的结果数量。将 paginate 属性设置为 true，将在所选项目下为空的状态下显示翻页链接。
<Typeahead
id="option-5"
labelKey="name"
onChange={setSelected}
options={options}
paginate
selected={selected}
/>selectHintOnEnter & submitFormOnEnter
这两个选项控制在何时启用 Enter 钮选择建议或提交表单。
useCache
将这个选项设置为false，将禁用搜索缓存，以便描述为 false 的选项可以动态更新。
-- -------------------- ---- ------- ---------- ------------- --------------- ---------------------- ----------------- ----------------- ------------------- ---------------- --
这些高级选项可以在 @tkloht/react-bootstrap-typeahead 的官方文档中找到。
总结
本文简单介绍了 @tkloht/react-bootstrap-typeahead 组件的安装和使用方法。了解了每个属性选项的用途，并在最后简要地提到了一些高级选项。这个组件可以帮助你在 React + Bootstrap 应用中创建高度可定制的自动补全、多选组件，从而提供了一个非常高效的搜索框。如果你想要为你的项目添加一个优秀的自动补全、多选组件，那么 @tkloht/react-bootstrap-typeahead 组件就是一个很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a281e8991b448d5f16