React函数式组件免费地址自动补全方案及类组件转函数组件方法

一、可用的免费函数式组件库 #

推荐两个实用的免费方案，均支持React函数式组件：

• @react-google-maps/api：Google官方维护的React封装库，基于Google Places API（提供免费调用额度），能轻松实现地址自动补全，同时获取地点名称、完整地址及经纬度信息。
• 手动封装：基于Google Places API，用useState和useEffect手写逻辑，适合新手理解底层原理。

二、将react-autocomplete-places的类组件示例转为函数式组件 #

react-autocomplete-places本身支持函数式组件，只是官方示例用了类组件，转换步骤非常简单，核心是用React Hooks替代类组件的state和生命周期：

转换步骤 #

1. 用useState替代类组件的this.state，管理输入值、选中地点等状态。
2. 将类组件的类方法改为组件内的普通函数，无需绑定this。
3. 直接在组件中渲染Autocomplete组件，传入状态和回调函数。

转换后的完整代码 #

import React, { useState } from 'react';
import Autocomplete from 'react-autocomplete-places';

const AddressAutocomplete = () => {
  // 管理输入框值和选中的地点
  const [inputValue, setInputValue] = useState('');
  const [selectedPlace, setSelectedPlace] = useState(null);

  // 输入框内容变化时更新状态
  const handleInputChange = (newValue) => {
    setInputValue(newValue);
  };

  // 选中地点时的回调，获取地址和经纬度
  const handlePlaceSelect = (place) => {
    setSelectedPlace(place);
    // 提取经纬度
    const latitude = place.geometry.location.lat();
    const longitude = place.geometry.location.lng();
    console.log('选中地点：', place.formatted_address);
    console.log('经纬度：', latitude, longitude);
  };

  return (
    <Autocomplete
      apiKey="你的Google API密钥" // 需提前申请并启用Places API
      value={inputValue}
      onChange={handleInputChange}
      onSelect={handlePlaceSelect}
      options={{ 
        types: ['address'], // 只显示地址类结果
        componentRestrictions: { country: 'cn' } // 可选：限制国家，比如中国
      }}
    />
  );
};

export default AddressAutocomplete;

注意事项 #

• 需提前在Google Cloud平台申请API密钥，并启用Places API。
• Google Places API有免费调用额度，超出后会产生费用，需留意使用量。

内容的提问来源于stack exchange，提问作者sarika tr