无法从react-google-maps/api中的StandaloneSearchBox访问this.searchBox

Question

我正在尝试访问getPlaces()应该位于StandaloneSearchBox组件中的函数react-google-maps/api。在文档和其他示例中，我们以这种方式使用它：

\n

function Map() {\n\n // does not work.\n // Error -> \'this\' implicitly has type \'any\' because it does not have a type \n // annotation.ts(2683)\n // index.tsx(22, 10): An outer value of \'this\' is shadowed by this container.\n const onPlacesChanged = () => console.log(this.searchBox.getPlaces());\n\n  return (\n    <LoadScript\n      googleMapsApiKey="YOUR-API-KEY"\n      libraries={places}\n    >\n      <GoogleMap\n        mapContainerStyle={containerStyle}\n        center={center}\n        zoom={zoom}\n      >\n        { /* Child components, such as markers, info windows, etc. */}\n        <>\n          <StandaloneSearchBox onPlacesChanged={onPlacesChanged} >\n            <input\n              type=\'text\'\n              placeholder=\'Customized your placeholder\'\n              style={{\n                boxSizing: \'border-box\',\n                border: `1px solid transparent`,\n                width: `270px`,\n                height: `40px`,\n                padding: `0 12px`,\n                borderRadius: `3px`,\n                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,\n                fontSize: `14px`,\n                outline: `none`,\n                margin: \'center\',\n                textOverflow: `ellipses`,\n                position: \'absolute\',\n                top: \'40px\',\n                marginLeft: \'50%\'\n              }}\n            />\n          </StandaloneSearchBox>\n        </>\n      </GoogleMap>\n    </LoadScript>\n  )\n}\n\n

\n

我正在尝试这种方式，因为这是我设法进入该函数的唯一方法this：

\n

// ... all the same \n\n// does not work either, this is a strange object and "searchBox" does not exists in it\nfunction onPlacesChanged(this: any) {\n     console.log(this.searchBox.getPlaces())\n  }\n\n// ... all the same\n\n

\n

但我在访问该searchBox属性时遇到问题this。当我打印时this，它显示一个巨大的奇怪对象，其属性如下：`{ e3 : {\xe2\x80\xa6}, gm_bindings : {\xe2\x80\xa6}, gm_accessors_: {\xe2\x80\xa6}}

\n

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

\n

在文档中，该函数onPlacesChanged是这样描述的：

\n

onPlacesChanged (() => void) | undefined \n\nDescription:    This event is fired when the user selects a query, getPlaces should be used to get new places.\n

\n

Answer 1

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

1. 我可以看到您在代码中使用了功能组件。您不能this在功能组件中使用。您可以使用 useState 来代替。您可以使用而不是 this.searchBoxconst [searchBox, setSearchBox] = useState(null);

2. 获得 useState 后，使用onLoadSearchBox 的 props 调用一个函数，在该函数中将 Searchbox 对象的 ref 放入搜索框状态。

3. 在您的 中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;