我可以自动聚焦 mapbox-gl react 地理编码器吗
Can I auto-focus a mapbox-gl react geocoder
我们正在使用React's wrapper to Mapbox geocoder component。我们的代码基本上是 README 中的代码,除了我们仅在请求时显示地理编码器输入字段(当单击某些 "Edit Address" 按钮时)。
是否可以自动聚焦 "Search..." <input/>
字段(由 <Geocoder />
创建)组件,以便用户可以在地理编码器出现后立即开始输入?
您应该使用 Geocoders 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'));
我们正在使用React's wrapper to Mapbox geocoder component。我们的代码基本上是 README 中的代码,除了我们仅在请求时显示地理编码器输入字段(当单击某些 "Edit Address" 按钮时)。
是否可以自动聚焦 "Search..." <input/>
字段(由 <Geocoder />
创建)组件,以便用户可以在地理编码器出现后立即开始输入?
您应该使用 Geocoders 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'));