React+Highcharts：如何从饼图点击事件访问组件实例

有三种常用方法可以让你在Highcharts的点击事件回调中获取到React组件实例：

方法一：使用箭头函数 #

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是组件实例）。直接把点击事件的回调改成箭头函数即可：

class MyChart extends Component<IProps_Chart, IState_Chart> {
    constructor(props: IProps_Chart) {
        super(props);
        Highcharts.setOptions(theme);
        const pieOptions: any = this.props.compact ? {
            chart: { type: 'pie' },
            series: [{
                data: this.props.data,
                point: {
                    events: {
                        // 改用箭头函数，this指向组件实例
                        click: (event: Highcharts.SeriesClickCallbackFunction) => {
                            this.setState({id: event.pointerId});
                        }
                    }
                }
            }]
        };
        this.state = { options: pieOptions };
    }
    render() {
        return (<HighchartsReact options={this.state.options} highcharts={Highcharts}/>);
    }
}

方法二：提前保存组件实例的引用 #

在构造函数里把组件的this赋值给一个变量（比如that），然后在回调函数中使用这个变量来调用组件的方法：

class MyChart extends Component<IProps_Chart, IState_Chart> {
    constructor(props: IProps_Chart) {
        super(props);
        Highcharts.setOptions(theme);
        // 保存组件实例的引用
        const that = this;
        const pieOptions: any = this.props.compact ? {
            chart: { type: 'pie' },
            series: [{
                data: this.props.data,
                point: {
                    events: {
                        click: function(event: Highcharts.SeriesClickCallbackFunction) {
                            // 使用that代替this，指向组件实例
                            that.setState({id: event.pointerId});
                        }
                    }
                }
            }]
        };
        this.state = { options: pieOptions };
    }
    render() {
        return (<HighchartsReact options={this.state.options} highcharts={Highcharts}/>);
    }
}

方法三：将回调抽为类方法并绑定this #

如果点击逻辑比较复杂，可以把它抽成组件的类方法，然后在构造函数中绑定this：

class MyChart extends Component<IProps_Chart, IState_Chart> {
    constructor(props: IProps_Chart) {
        super(props);
        Highcharts.setOptions(theme);
        // 绑定类方法的this到组件实例
        this.handlePieClick = this.handlePieClick.bind(this);
        const pieOptions: any = this.props.compact ? {
            chart: { type: 'pie' },
            series: [{
                data: this.props.data,
                point: {
                    events: {
                        click: this.handlePieClick
                    }
                }
            }]
        };
        this.state = { options: pieOptions };
    }

    // 抽离的点击处理方法
    handlePieClick(event: Highcharts.SeriesClickCallbackFunction) {
        this.setState({id: event.pointerId});
    }

    render() {
        return (<HighchartsReact options={this.state.options} highcharts={Highcharts}/>);
    }
}

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