反应谷歌图表回调

Question

我想为 react-google-charts 的 Chart 组件创建一个事件处理程序

关闭。文档有一个例子。

<Chart
    chartType="ScatterChart"
    rows={this.state.rows}
    columns={this.state.columns}
    options={this.state.options}
    graph_id="ScatterChart"
    width="100%"
    height="400px"
    chartEvents={this.chartEvents} // <- this is event handler
   />

chartEvents 看起来像

this.chartEvents=[
  {
    eventName : 'select',
    callback  : function(Chart) {
        console.log("Selected ",Chart.chart.getSelection());
    }
  }
];

如何从回调函数中引用类上下文？我想改变我的本地状态。

this.chartEvents=[
  {
    eventName : 'select',
    callback  : function(Chart) {
        // here I want to refer to this.setState
        console.log("Selected ",Chart.chart.getSelection());
    }
  }
];

Answer 1

我和你有同样的需要并且能够做到。 您可以创建一个变量（下面示例中的 superClass）并将类 (this) 的值分配给它。这样你仍然可以在回调范围内访问它。

const superClass = this;
this.chartEvents = [
  {
    eventName: 'select',
    callback(Chart) {
        // here you can refer to superClass.setState
        console.log("Selected ",Chart.chart.getSelection());
    },
  },
];