why can’t access the function inside the listener

I am using a class component. When I run this script, it plots the graphic, but in the next line when it calls the function computePM_from_ClickedPoint, I get the error below. The error refers to “this”, but without it, I cannot call the function. Suggestions?

Error: Cannot read properties of undefined (reading 'computePM_from_ClickedPoint')

 
interface IProps {
  mapView: __esri.MapView | __esri.SceneView;
}
 
constructor(props) {
  super(props);
  this.enableMapClick = this.enableMapClick.bind(this);
}
 
enableMapClick = () => {
  var view = this.props.mapView;
    
  view.on("click", function (evt) {
    var point = new Point({
      longitude: evt.mapPoint.longitude,
      latitude: evt.mapPoint.latitude,
      spatialReference: view.spatialReference,
    });

    var pointMarker = new PictureMarkerSymbol({
      url: "https://static.arcgis.com/images/Symbols/Animated/EnlargeRotatingRedMarkerSymbol.png",
      height: "20px",
      width: "20px",
    });

    var graphic = new Graphic({
      geometry: point,
      symbol: pointMarker,
    });
    
    console.log(graphic)
    
    view.graphics.add(graphic);
    this.computePM_from_ClickedPoint(graphic.geometry);
  });
    
 computePM_from_ClickedPoint(screenPoint) {
    var mp = webMercatorUtils.webMercatorToGeographic(screenPoint, false);
    ----
    -----
    }
 
 render() {
    return (
      <div>
      <Button onClick={this.enableMapClick}>
         Click the Map
      </Button>
      </div>
      )}

tried unsuccessfully changing the call to:

this.computePM_from_ClickedPoint(graphic.geometry).bind(this);

Answer

Instead of bindingthis.computePM_from_ClickedPoint(graphic.geometry).bind(this) try to bind to this.enableMapClick on onClick event (this way you can call it with this/Class same specific object), something like.

render() { return (
<div>
  <button onClick="{this.enableMapClick.bind(this)}">Click the Map</button>
</div>
)}

For more details:- javascript-bind-method