reactjs - Mapbox & React：无法在搜索框中输入值

Question

我在一个项目中使用了 React/Mapbox（更具体地说是 DeckGL）的组合。我想包括用于查询地址的地理编码。

我当前的输出：

使用此代码生成：

<DeckGL {...deckGLProps} ref={deckRef}>
        <StaticMap
          ref={mapRef}
          {...staticMapProps}
        />
        <div style={{ border: '5px solid black', top: 500, display: 'inline-block', zIndex: '9999'}}>
          <Geocoder
            mapRef={mapRef}
            onViewportChange={handleGeocoderViewportChange}
            mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
            position="top-left"
            minLength={1}
            trackProximity={true}
            countries={"us"}
            reverseGeocode={true}
            enableEventLogging={false}
          />
        </div>
      </DeckGL>

我的问题：我无法点击搜索栏。搜索栏在其div. 有没有办法放置组件以使搜索栏可点击？我不认为这是组件的问题，因为此示例Geocoder中的代码运行良好。

标签： reactjsmapboxmapbox-gl-jsdeck.glreact-map-gl

Answer 1

在官方react-map-gl-geocoder 回购之后，您可以使用containerRefprop将地理编码器放置在地图之外（或任何您想要的，注意position: absolutecss prop）：

例子：

const geocoderContainerRef = useRef();

// render
return (
  <div>
    <div
      ref={this.geocoderContainerRef}
      style={{
        position: 'absolute',
        top: 50,
        left: 50
      }}
    />
    <MapGL
      ref={this.mapRef}
      {...viewport}
      onViewportChange={this.handleViewportChange}
      mapboxApiAccessToken={MAPBOX_TOKEN}
    >
      <Geocoder
        mapRef={this.mapRef}
        containerRef={this.geocoderContainerRef}
        onResult={this.handleOnResult}
        onViewportChange={this.handleGeocoderViewportChange}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      />
      <DeckGL {...viewport} layers={[searchResultLayer]} />
    </MapGL>
  </div>
);