使用loadModules ReactJS访问esri事件中的访问状态

Question

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

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

知道我可能做错什么了吗？可以在componentDidMount之外访问搜索小部件吗？

谢谢！

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

并创建一个新的函数

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)