什么是 mesosphere-react-typeahead?
mesosphere-react-typeahead 是一个基于 React 的自动完成框架。它是一个 npm 包，可以很容易地在项目中使用。
安装
你可以在你的项目中使用 npm 来安装 mesosphere-react-typeahead
npm install mesosphere-react-typeahead --save
使用方法
下面将详细介绍如何在项目中使用 mesosphere-react-typeahead。
引入组件
在你的项目中，可以使用 import 来引入 mesosphere-react-typeahead 的代码：
import Typeahead from 'mesosphere-react-typeahead';
构建选择项
你需要创建一个对象数组，每个对象为一个选项，包含两个属性：name 和 id。name 属性是选项的显示文本，id 属性是选项的唯一标识符。
以下是一个示例选择项数组：
const options = [
{ name: 'Java', id: 1 },
{ name: 'JavaScript', id: 2 },
{ name: 'Python', id: 3 },
{ name: 'Ruby', id: 4 },
{ name: 'Swift', id: 5 },
{ name: 'PHP', id: 6 },
];使用组件
在你的组件中使用 mesosphere-react-typeahead 组件。mesosphere-react-typeahead 组件支持多种属性来自定义其行为和外观。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -----------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
--------- -----
--
-
------------ - ---------- -- -
--------------- -------- ---
-
-------- -
----- - -------- - - -----------
------ -
-----
----------
-----------------
----------------- --------
----------------------------
--
- -------- -- -------------- --------------------- -
------
--
-
-在这个示例中，构建了一个基本的 mesosphere-react-typeahead 组件，并使用了一个 handleChange 回调，它将选择项更新到组件的状态中。
自定义选项
你可以提供一个函数来将选择项渲染为自定义元素。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -----------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
--------- -----
--
-
------------ - ---------- -- -
--------------- -------- ---
-
------------ - -------- -- -
------ -
-----
---- --------------------------------------------------- ----------------- --
--------------------------
------
--
-
-------- -
----- - -------- - - -----------
------ -
-----
----------
-----------------
----------------- --------
----------------------------
--------------------------------
--
- -------- -- -------------- --------------------- -
------
--
-
-在这个示例中，我们提供了一个 renderOption 方法来渲染每个选项。它渲染了图像和名称以便更好的展示。你可以使用自己的模板在选项中设置任意元素。
匹配算法
mesosphere-react-typeahead 包含几种不同的匹配算法，可以帮助你更好地匹配选项。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -----------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
--------- -----
--
-
------------ - ---------- -- -
--------------- -------- ---
-
-------- -
----- - -------- - - -----------
------ -
-----
----------
-----------------
----------------- --------
----------------------------
--------------------
--
- -------- -- -------------- --------------------- -
------
--
-
-在这个示例中，我们将匹配算法设置为“contains”。它将尝试将输入与选项的任何部分进行匹配。其他选项包括“startsWith”、“wordStart”和“fullText”。
总结
这就是 mesosphere-react-typeahead 的使用指南。你现在应该准备好在你的项目中使用它了。使用组件的时候，你应该构建一个选项数组并提供一个回调来处理选择结果。你可以使用各种不同的属性来自定义外观和行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040b1a