Могу ли я автоматически сфокусироваться на mapbox-gl?

Question

Мы используем оболочку React для компонента геокодера Mapbox .Наш код по сути тот же, что и в README, за исключением того, что мы показываем поле ввода геокодера только по запросу (при нажатии какой-либо кнопки «Изменить адрес»).

Возможно ли автоматически сфокусировать «Поиск».. "<input/> поле (созданное компонентом <Geocoder />), чтобы пользователь мог начать печатать сразу после появления геокодера?

Answer 1

Вы должны использовать геокодеры onInit prop, которые будут переданы экземпляру геокодера и будут вызваны после инициализации геокодера.

class App extends Component {
  state = {
    viewport: {
      width: 400,
      height: 400,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8,
    },
    searchResultLayer: null,
  };

  // rest of the code

  handleGeocoderInit = (geocoderInstance) => {
    const inputEl = geocoderInstance._inputEl;
    inputEl.focus();
  };

  render() {
    const { viewport, searchResultLayer } = this.state;

    return (
      <MapGL
        ref={this.mapRef}
        {...viewport}
        onViewportChange={this.handleViewportChange}
        mapboxApiAccessToken={MAPBOX_TOKEN}>
        <Geocoder
          mapRef={this.mapRef}
          onResult={this.handleOnResult}
          onViewportChange={this.handleGeocoderViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
          position="top-left"
          onInit={this.handleGeocoderInit}
        />
        <DeckGL {...viewport} layers={[searchResultLayer]} />
      </MapGL>
    );
  }
}

render(<App />, document.getElementById('root'));