React类组件中ArcGIS视图点击监听器调用类方法报错求助

核心原因 #

view.on("click")的回调用了普通function，导致回调内部的this指向ArcGIS的View实例，而非你的React组件实例，所以找不到computePM_from_ClickedPoint方法。

解决方法 #

方法1：将回调改为箭头函数（推荐） #

箭头函数会继承外部作用域的this（即React组件实例），直接替换即可：

enableMapClick = () => {
  const view = this.props.mapView;
  // 把普通function改成箭头函数
  view.on("click", (evt) => {
    const point = new Point({
      longitude: evt.mapPoint.longitude,
      latitude: evt.mapPoint.latitude,
      spatialReference: view.spatialReference,
    });
    const pointMarker = new PictureMarkerSymbol({
      url: "https://static.arcgis.com/images/Symbols/Animated/EnlargeRotatingRedMarkerSymbol.png",
      height: "20px",
      width: "20px",
    });
    const graphic = new Graphic({
      geometry: point,
      symbol: pointMarker,
    });
    console.log(graphic);
    view.graphics.add(graphic);
    // 此时this指向组件实例，可正常调用方法
    this.computePM_from_ClickedPoint(graphic.geometry);
  });
};

方法2：提前保存组件实例的this #

如果坚持用普通函数回调，可在回调外部先把组件的this存为变量：

enableMapClick = () => {
  const view = this.props.mapView;
  // 保存组件的this到变量that
  const that = this;
  view.on("click", function (evt) {
    // 原有代码...
    // 用that代替this调用方法
    that.computePM_from_ClickedPoint(graphic.geometry);
  });
};

额外优化：确保computePM_from_ClickedPoint的this指向 #

为避免后续其他调用场景的this问题，建议把computePM_from_ClickedPoint也改成箭头函数形式的类属性：

computePM_from_ClickedPoint = (screenPoint) => {
  const mp = webMercatorUtils.webMercatorToGeographic(screenPoint, false);
  // 你的业务逻辑代码
};

说明你之前尝试的错误 #

你写的this.computePM_from_ClickedPoint(graphic.geometry).bind(this)是错误的——bind需要绑定在函数本身，而不是函数调用之后，正确写法应该是this.computePM_from_ClickedPoint.bind(this)(graphic.geometry)，但这种写法不如箭头函数简洁直观。

内容的提问来源于stack exchange，提问作者Lefteris Koumis