当我们需要在前端项目中使用地点自动补全功能时，yelloan-react-places-autocomplete 可以成为一个很好的选择，它可以方便地获取 Google Map Places API 的许多强大功能以提供更好的用户体验。在本文中，我们将为大家提供yelloan-react-places-autocomplete的使用教程，涉及到相关的安装、配置、如何在项目中集成等方面。
安装
要使用 yelloan-react-places-autocomplete，我们首先需要安装它。我们可以通过执行以下命令来安装该包：
npm install --save yelloan-react-places-autocomplete
配置
要使用 yelloan-react-places-autocomplete，我们需要先将其添加到 React 组件中。假设我们希望在我们的 ContactForm 组件中使用该组件，我们需要在其中使用以下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------------ ---- ------------------------------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
-------- ---
------- --
--
-
------------ - ------- -- -
--------------- ------- ---
--
------------ - ------- -- -
--------------- ------- ---
--
-------- -
------ -
-------------------
--------------------------
----------------------------
----------------------------
--------------------------
------------------------------------------------- - --
-------------------------------
-----------------------------
--
--
-
-
------ ------- ------------上述代码展示了用法的基本架构，其中我们创建了一个名为 ContactForm 的组件，组件中包含了 yelloan-react-places-autocomplete 的相关调用。下一节将具体解释这些代码是如何工作的。
集成
让我们看一下上一节中使用的代码是如何工作的，以及如何将其集成到我们的项目中：
基本架构
最重要的部分是代码中的 PlacesAutocomplete 组件调用。我们可以通过以下方式调用该组件：
-- -------------------- ---- ------- ------------------- -------------------------- ---------------------------- ---------------------------- -------------------------- ------------------------------------------------- - -- ------------------------------- ----------------------------- --
在其中我们使用通过值（value）、onchange事件（onChange）、handleSelect、handleError等方式传递地址信息，并显示后台返回的相关信息。
传递由用户输入的地址到 PlacesAutocomplete
在组件中，我们定义了一个构造函数：
constructor(props) {
super(props);
this.state = {
address: '',
errors: {}
};
}然后定义了一个叫做 handleChange 的回调，用来在用户输入地址时更新 state：
handleChange = address => {
this.setState({ address });
};现在，在实际应用中，我们可以使用一个 input 文本框将用户的输入传递给该回调：
<input placeholder="输入地址" value={this.state.address} onChange={(e) => this.handleChange(e.target.value)} />接受返回地址信息
一旦用户通过提示框选择了地址，我们就会得到一个回调，该回调会将返回的地址传递给我们的应用程序，在此处，我们定义了另一个回调函数 handleSelect 来处理返回的地址：
handleSelect = address => {
this.setState({ address });
};现在，我们的应用程序将拥有返回的地址，并可以将其在 UI 中展示出来。
更多功能和用例
在实际的应用中，我们可能需要一些高级功能来提供更好的用户体验，yelloan-react-places-autocomplete 还提供了一些额外功能：
选项
在上述代码中，我们还传递了一些选项给 PlacesAutocomplete。具体来说，它们是：
- shouldFetchSuggestions：设置为
true将默认开启自动完成建议。可以通过 keyDown 事件来关闭它。 - highlightFirstSuggestion：这个选项将高亮并选中建议列表中的第一个建议。
- searchOptions：这是一个普通的 JavaScript 对象，可用于向 Google Places API 传递选项。
错误处理
如果 PlacesAutocomplete 与 Google Places API 通信失败，它将返回一个错误，可以在 onError 回调中进行处理:
handleError(status, clearSuggestions) {
console.log('Error: ', status);
clearSuggestions();
}自定义样式
我们可以通过 Stylelint 来自定义样式：
-- -------------------- ---- -------
---------------------- -
-------- -
------ -----
-------- -----
-------------- ----
------- --- ----- -----
---------- -----
-
------------------------- -
--------- ---------
---------------- -
------- --------
----------------- ------
-------------- --- ------ -----
-------- -----
---------- -----
------- -
----------------- --------
-
-
-
-示例代码
一个简单的完整示例代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------------ ---- ------------------------------------
------ --------------------------------------------------------
------ ------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
-------- ---
------- --
--
-
------------ - ------- -- -
--------------- ------- ---
--
------------ - ------- -- -
--------------- ------- ---
--
------------------- -
------------------- -- --------
-
-------- -
----- ------------- - -
---------------------- - -------- ---- -
--
------ -
---- ----------------------------------
--------------------
-------------------
--------------------------
----------------------------
----------------------------
--------------------------
------------------------------------------------- - --
-------------------------------
-----------------------------
--
------
--
-
-
------ ------- ----这是一个简单的应用程序，在其中，我们渲染一个名为 git-test-autocomplete 的 DIV 元素，并创建一个输入框，它通过调用 handleChange、handleSelect、handleError 回调来根据输入获取相关返回结果。
结论
yelloan-react-places-autocomplete 可以帮助我们快速实现地点自动补全功能，无需花费大量时间进行复杂的构建。在阅读完本文后，我们相信你已经了解了 yelloan-react-places-autocomplete 的基本用法，它可以帮助我们更加高效地处理地点自动补全功能。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609881e8991b448decfe