1

我正在使用 esri-loader 的延迟加载“loadModules”来加载 esri 模块。这里的问题是当“搜索完成”事件触发时，我无法访问状态来存储经度和纬度值。创建搜索小部件时，我也无法覆盖“allPlaceholder”值

https://codesandbox.io/s/pedantic-hellman-sbcdz？

知道我做错了什么吗？是否可以在 componentDidMount 之外访问 Search 小部件？

谢谢 ！

import React , { Component, Fragment } from 'react';
import { loadModules } from 'esri-loader';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';

class MapSearch extends Component {
    constructor(props) {
        super(props);
        this.mapRef = React.createRef();
        this.searchRef = React.createRef();
        this.state = {
            mysearch: null,
            longitude: 0,
            latitude: 0,
            searchTerm: ""
        };
    }
    componentDidMount() {
        loadModules(['esri/Map', 'esri/views/MapView', 'esri/widgets/Search'], { css: true })
            .then(([ArcGISMap, MapView, Search]) => {
                const map = new ArcGISMap({
                    basemap: 'osm'
                });

                this.view = new MapView({
                    container: this.mapRef.current,
                    map: map,
                    center: [-85, 35],
                    zoom: 14
                });
                var mysearch = new Search({
                    view: this.view,
                    allPlaceholder: "TESTESTTEST", // this doesn't work
                    container: this.searchRef.current
                });
                mysearch.on("search-complete", function(event){
                    console.log(event);
                   console.log(this.state);
                 }) 
            }
        );
    }
    render() {
        return (
            <Fragment>
                <Row >
                    <Col lg={7}><div className="arcmap" style={{"height": "50vh"}}  ref={this.mapRef}></div></Col>
                    <Col lg={5}><div className="zobya-search" style={{ "wdith": "100%" }} ref={this.searchRef} ></div></Col>
                </Row>
            </Fragment>
        );
    }
}
export default MapSearch;

原来这很简单，希望它会帮助别人

just add a binding in the constructor such as

this.handleSearchComplete = this.handleSearchComplete.bind(this); 

and create a new function  

handleSearchComplete(event) {
        this.setState({
            longitude: event.results[0].results[0].feature.geometry.longitude , 
            latitude: event.results[0].results[0].feature.geometry.latitude
       });
    } 
then call this callback function such as
mysearch.on("search-complete", this.handleSearchComplete)
4

1 回答 1

0

原来这很简单，希望它会帮助别人

只需在构造函数中添加一个绑定，例如

this.handleSearchComplete = this.handleSearchComplete.bind(this);

并创建一个新功能

handleSearchComplete(event) {
        this.setState({
            longitude: event.results[0].results[0].feature.geometry.longitude , 
            latitude: event.results[0].results[0].feature.geometry.latitude
       });
    }

然后调用此回调函数，例如

mysearch.on("search-complete", this.handleSearchComplete)
于 2020-12-07T01:34:00.760 回答