javascript - react 图选项onclick事件

我已经在我的react应用程序中制作了一个highcharts柱形图，现在正尝试向该图添加onClick事件。我的目标是，当用户单击列时，我可以获得X和Y轴的值，然后从页面中调用函数。

使用plotoptions可以实现onClick事件，如下所示:

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: () => {
          this.fuction.call(this, 1);
        }
      }
    }
  }
}}

问题是我可以调用该函数，但是无法访问该列的值。

因此，我尝试这样做:

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: function () {
          console.log(this);
        }
      }
    }
  }
}}

这样，我可以通过this访问列上的值，但是不能调用该函数，因为它不保存当前页面对象。

我的问题是，如何将两者结合起来，以便可以访问所选列的值并在页面上调用该函数？

我已经试过了:

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: function (e) {
          console.log(this);
          console.log(e);
        }
      }
    }
  }
}}

这给了我onClick事件和列，但没有当前页面对象。

我也尝试过这个:

plotOptions={{
  column: {
    cursor: 'pointer',
    point: {
      events: {
        click: (e) => { console.log(this); console.log(e);  }
      }
    }
  }
}}

但这也不能满足我的需求。

我确信这不是很困难，我只是找不到它，或者没有正确的搜索词...

最佳答案

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: (e) => { console.log(this); console.log(e.point.category); console.log(e.point.y);  }
      }
    }
  }
}}

现在this包含页面的当前状态，我可以从e.point中访问列中的信息