Блог

У меня мое приложение работает в React. Я установил карту с помощью react-map-gl-geocoder, react-map-gl и mapbox-gl. Я создаю картографическое приложение с помощью React map GL, используя геокодер для адресного поиска. Карта работает хорошо. Теперь мне нужно иметь возможность читать содержимое, которое пользователь ввел во входной адрес на карте моего дочернего компонента, чтобы я мог обновить состояние в приложении моего материнского компонента в пространстве, которое я для него создал (this.state.answerOptionsInputs .Вопрос1).

введите описание изображения здесь я попытался передать функцию для события onChange компонента MapGL и компонента Geocoder, но это не сработало.

 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 }/>
  

Заранее большое спасибо!!

можно попробовать

 onResult={onSearchLocation } 
  

вместо

 onChange={ onSearchLocation }