Javascript 无法从react google maps/api中的StandaloneSarchbox访问此.searchBox

我正在尝试访问

getPlaces（）

函数，该函数应该位于

resact google maps/api

的

standalonearchBox

组件中。在和其他示例中，用户以这种方式使用它：

函数映射（）{
//不起作用。
//错误->“this”隐式具有类型“any”，因为它没有类型
//注释.ts（2683）
//tsx（22，10）:“this”的外部值被此容器隐藏。
const onPlacesChanged=（）=>console.log（this.searchBox.getPlaces（））；
返回(
{/*子组件，如标记、信息窗口等。*/}
)
}

我这样做是因为这是我在该函数中获取此的唯一方法：

/。。。照样
//也不起作用，这是一个奇怪的对象，其中不存在“搜索框”
函数onPlacesChanged（此：任意）{
console.log（this.searchBox.getPlaces（））
}
// ... 照样

但是从

此

访问

搜索框

属性时遇到问题。当我打印

this

时，它会显示一个大的奇怪对象，其属性为`{e3:{…}，gm_绑定：{…}，gm_访问器{…}

以前有人遇到过这个问题吗

在中，函数

onPlacesChanged

描述如下：

onPlacesChanged（（）=>void）|未定义
描述：当用户选择查询时触发此事件，应使用getPlaces获取新位置。

以下是关于如何使代码正常工作的建议：

我可以看出您正在代码中使用函数组件。您不能在功能组件中使用此。您可以改为使用useState。 代替this.searchBox，您可以使用

const[searchBox，setSearchBox]=useState（null）

获得useState后，使用SearchBox的

onLoad

道具调用一个函数，将SearchBox对象的ref置于SearchBox状态

在您的

onPlacesChanged

中，您只需登录

searchBox.getPlaces（）

即可获得getPlaces的结果

以下是示例和代码片段：

/*global google*/
import ReactDOM from 'react-dom';
import React, { useState } from 'react';

import {
  GoogleMap,
  StandaloneSearchBox,
  LoadScript
} from '@react-google-maps/api';
const lib = ['places'];
const center = { lat: 40.756795, lng: -73.954298 };
function Map() {
  const [searchBox, setSearchBox] = useState(null);

  const onPlacesChanged = () => console.log(searchBox.getPlaces());
  const onSBLoad = ref => {
    setSearchBox(ref);
  };

  return (
    <LoadScript
      googleMapsApiKey="YOUR_KEY"
      libraries={lib}
    >
      <GoogleMap
        mapContainerStyle={{ height: '400px', width: '800px' }}
        center={center}
        zoom={12}
      >
        {/* Child components, such as markers, info windows, etc. */}
        <>
          <StandaloneSearchBox
            onPlacesChanged={onPlacesChanged}
            onLoad={onSBLoad}
          >
            <input
              type="text"
              placeholder="Customized your placeholder"
              style={{
                boxSizing: 'border-box',
                border: `1px solid transparent`,
                width: `270px`,
                height: `40px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                margin: 'center',
                textOverflow: `ellipses`,
                position: 'absolute',
                top: '40px',
                marginLeft: '50%'
              }}
            />
          </StandaloneSearchBox>
        </>
      </GoogleMap>
    </LoadScript>
  );
}
export default Map;

/*全球谷歌*/
从“react dom”导入react dom；
从“React”导入React，{useState}；
进口{
谷歌地图，
Standalonesearch Box，
加载脚本
}来自“@react谷歌地图/api”；
常量lib=['places']；
施工中心={lat:40.756795，液化天然气：-73.954298}；
函数映射（）{
const[searchBox，setSearchBox]=useState（null）；
const onPlacesChanged=（）=>console.log（searchBox.getPlaces（））；
const onSBLoad=ref=>{
设置搜索框（参考）；
};
返回(
{/*子组件，如标记、信息窗口等。*/}
);
}
导出默认地图；

是的，这很有效。谢谢