Access state in esri event using loadModules ReactJS

Question

I am using lazy loading "loadModules " from esri-loader in order to load esri modules. The problem here is that I can't access the state to store the longitude and latitude values when 'search-complete' event fires. I am also not able to override the "allPlaceholder" value when creating the Search widget

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

Any idea what I could be doing wrong ? is it possible to access the Search widget outside of componentDidMount ?

Thanks !

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;

This turned out to be very simple, hopefully it will help someone else

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 turned out to be very simple, hopefully it will help someone else

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)