react-places-autocomplete-notouch 是一个基于 React 的地点自动补全组件，可以轻松地添加地址自动完成功能到你的 React 应用程序中。由于其简单易用以及易于集成等特点，它已经成为很多前端开发者的首选。
本文将会提供 react-places-autocomplete-notouch 的使用教程，帮助你快速上手并利用它构建出更加完善的 React 应用程序。
安装和引入
你需要先安装 react-places-autocomplete-notouch：
npm install react-places-autocomplete-notouch --save
接着，在你的 React 项目中引入它：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------- -
-----------------
----------
- ---- ------------------------------------
-------- ------------- -
----- --------- ----------- - -------------
----- ------------ - ----- ------- -- -
----- ------- - ----- ------------------------
----- ------ - ----- ----------------------
--------------------
--
------ -
-----
-------------------
---------------
---------------------
-----------------------
-
--- -------------- ------------ ----------------------- ------- -- -- -
-----
------ ------------------- ------------ ----- -------- --- --
-----
-------- - --------------------- - -----
----------------------------- -- -
----- ----- - -
---------------- ----------------- - --------- - -------
--
------ -
----
------------------------
-------------------------------------- - ----- ---
-
------------------------
------
--
---
------
------
--
---------------------
------
--
-示例代码解析
状态管理
这个例子中，我们使用了 useState 来管理组件的状态。 useState 是 React 16.8 之后引入的一个钩子，它允许我们在函数式组件中使用状态管理。
在这个例子中，我们使用 useState 来管理用户输入的地址：
const [address, setAddress] = useState('');address 是我们的状态变量， setAddress 是我们的更新函数。 通过调用 setAddress ，我们可以更新地址的值。
输入框
我们需要一个输入框来让用户输入他们的地址。 PlacesAutocomplete 组件使用了渲染函数模式，这意味着我们需要渲染一个函数将其作为 props 传递给 Autocomplete 组件：
-- -------------------- ---- -------
-------------------
---------------
---------------------
-----------------------
-
--- -------------- ------------ ----------------------- ------- -- -- -
-----
------ ------------------- ------------ ----- -------- --- --
-- ---
------
--
---------------------getInputProps 是一个帮助函数，它将会返回 input 元素所需 props ，我们只需要将它们解构并赋值到 input 元素中即可：
<input {...getInputProps({ placeholder: 'Type address' })} />智能建议框
当用户开始输入地址时， PlacesAutocomplete 组件将会提供一组智能建议。我们可以使用 map 来遍历这个建议列表并把每个建议渲染到页面中：
-- -------------------- ---- -------
----------------------------- -- -
----- ----- - -
---------------- ----------------- - --------- - -------
--
------ -
----
------------------------
-------------------------------------- - ----- ---
-
------------------------
------
--
---在这个例子中，我们还花了一些时间来设置建议框的样式。 getSuggestionItemProps 帮助函数将会返回一个建议项所需的 props ，我们通过将 style 对象传递给这个函数，将建议项背景色设置为 #41b6e6 或者是 #fff。
地址查询
当用户从智能建议框中选择一个地址时，handleSelect 函数将会被调用。这个函数使用 geocodeByAddress 和 getLatLng 函数来完成地址查询。
在这个例子中，我们只是简单地将地址的经度和纬度打印到控制台中：
const handleSelect = async (value) => {
const results = await geocodeByAddress(value);
const latLng = await getLatLng(results[0]);
console.log(latLng);
};结语
在本文中，我们介绍了如何使用 react-places-autocomplete-notouch 组件来实现一个地址自动完成功能。通过本文的学习，你应该可以轻松地在你的 React 应用程序中集成这个组件以及类似的组件，为你的用户提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608381e8991b448deb78