react-google-autocomplete组件输入框输入时禁用问题求助

以下是针对输入框禁用问题的排查与修复步骤：

• 修正Google Maps API脚本的库依赖
  你当前引入的脚本只包含geometry库，但Google Places Autocomplete需要places库支持。修改index.html中的脚本标签，添加places：

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=你的API_KEY&libraries=geometry,places">
  </script>
  

• 验证API密钥权限与限制

  1. 登录Google Cloud控制台，确认你的API密钥已启用Places API和Maps JavaScript API
  2. 检查密钥的应用限制（如HTTP引用限制），确保当前项目的域名在允许列表内；本地开发可暂时取消限制测试
  3. 查看API密钥的配额是否充足，配额耗尽会导致服务不可用

• 检查组件使用方式

  • 对于Autocomplete组件，可显式传入inputProps确保输入框未被禁用：

    <Autocomplete
      apiKey={locApiKey}
      onPlaceSelected={(place) => { console.log(place); }}
      inputProps={{
        disabled: false,
        placeholder: "输入城市名称"
      }}
    />
    

  • 对于usePlacesWidget钩子，必须将ref绑定到实际的input元素：

    const { ref: bootstrapRef } = usePlacesWidget({
      apiKey: locApiKey,
      onPlaceSelected: (place) => console.log(place),
    })
    
    // 渲染时绑定ref到input
    return <input ref={bootstrapRef} type="text" />
    

• 排查版本冲突或包问题

  1. 升级react-google-autocomplete到最新稳定版：

     npm update react-google-autocomplete
     

  2. 若升级后问题仍存在，可尝试回退到已知兼容的版本（如2.7.3）测试

• 查看浏览器控制台错误
  打开开发者工具的Console面板，检查是否有API加载失败、密钥无效、权限错误等提示，这些错误通常是输入框禁用的直接原因

• 避免重复加载API脚本
  部分版本的react-google-autocomplete会自动加载Google Maps API，若你手动在index.html中引入脚本，可能引发冲突。可尝试移除index.html中的脚本，让组件自动处理API加载

内容的提问来源于stack exchange，提问作者Abhinav ISJ