获取Geocoder地址搜索值以更新App.js中的状态（使用react-map-gl-geocoder、mapbox-gl和react-map-gl）

Question

我的应用程序在 React 中运行。 我已经安装了带有react-map-gl-geocoder、react-map-gl和mapbox-gl的地图。 我正在使用 React map GL 创建地图应用程序，使用地理编码器进行地址搜索。 地图效果很好。 现在我需要能够读取用户在子组件 Map 中输入地址的内容，以便我可以在我为其创建的空间中更新母组件 App 中的状态 (this.state.answerOptionsInputs .问题1).

在此输入图像描述 我尝试在 MapGL 组件和 Geocoder 组件的 onChange 事件上传递一个函数，但它不起作用。

Map.js
    <MapGL
            ref={mapRef}
            {...viewport}
            mapStyle="mapbox://styles/mapbox/streets-v9"
            width="100%"
            height="100%"
            onChange={ onSearchLocation }
            onViewportChange={handleViewportChange}
            mapboxApiAccessToken={MAPBOX_TOKEN}>
            <Geocoder
              mapRef={mapRef}
              containerRef={geocoderContainerRef}
              onViewportChange={handleGeocoderViewportChange}
              mapboxApiAccessToken={MAPBOX_TOKEN}
              position="top-left"
              onChange={ onSearchLocation }
            />
          </MapGL>

App.js

  handlerLocation(e) {
    const { value } = e.target;
        this.setState (prevState => {
          return {
            answerOptionsInputs: {
              ...prevState.answerOptionsInputs,
              Question1: value
            }
          }
        })   }

<Map onSearchLocation = { this.handlerLocation }/>

提前非常感谢！

Answer 1

可以尝试

onResult={onSearchLocation } 

而不是

onChange={ onSearchLocation }

Answer 2

对选定的地址尝试此操作

const handleAddress = (e) => {
  //you can access to with e.properties.full_address
}
<Geocoder
  ...props,           
  onRetrieve={handleAddress}
/>