反应谷歌图表回调

Question

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

关闭。文档有一个例子。

<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()); 
    }, 
    }, 
];