如何解决获取Geocoder地址搜索值以更新App.js中的状态使用react-map-gl-geocoder,mapbox-gl和react-map-gl
我的应用程序在React中运行。 我已经安装了带有react-map-gl-geocoder,react-map-gl和mapBox-gl的地图。 我正在使用Geocoder使用地址搜索使用React map GL创建一个地图应用程序。 该地图效果很好。 现在,我需要能够读取用户在子组件Map的输入地址中键入的内容,以便可以在我为其创建的空间(this.state.answerOptionsInputs)中更新主组件App中的状态。问题1)。
enter image description here 我已经尝试过在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 }/>
非常感谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。