使用 loadModules ReactJS 在 esri 事件中訪問 state

Question

我正在使用 esri-loader 的延遲加載“loadModules”來加載 esri 模塊。 這里的問題是，當“搜索完成”事件觸發時，我無法訪問 state 來存儲經度和緯度值。 創建搜索小部件時，我也無法覆蓋“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)

Answer 1

原來這很簡單，希望它會幫助別人

只需在構造函數中添加一個綁定，例如

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

並創建一個新的 function

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

然后調用這個回調 function 如

mysearch.on("search-complete", this.handleSearchComplete)