我可以自动聚焦地图框-gl 反应地理编码器吗?

Question

我们使用 React 的包装器 to Mapbox 地理编码器组件。我们的代码本质上是自述文件中的代码，除了我们仅在请求时显示地理编码器输入字段(单击某些"编辑地址"按钮时(。

是否可以自动聚焦"搜索..." <input/>字段(由<Geocoder />创建(组件，以便用户可以在地理编码器显示后立即开始输入？

Answer 1

您应该使用地理编码器onInit属性，该属性将传递一个地理编码器实例，并在初始化地理编码器时调用。

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'));