响应高图表无法从数据标签onclick调用函数

Question

我需要在点击时在datalabel上调用react函数。我没有答案。我正在使用高图

 chart: {
                type: 'column',
                zoomType: 'y'
            },

 dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function () {
                        return `<div><span class="text-center">${this.point.y}</span>` +
                            '<button onClick={this.openModal} class="btn-primary graph-custom-hover">i</button></div>'
                    },
                    crop: false,
                    overflow: "none",
                    style: {
                        fontSize: '10px',
                        fontWeight: 'bold',
                        wordWrap: 'break-word',
                        width: '125px',
                        lineHeight: '10px'
                    }
                }

我有一个openModal函数，如

  openModal = () => {
        this.setState({
            modal2: !this.state.modal2
        });
    }

[当我使用它时，我的渲染就这样

<button onclick="{this.openModal}" class="btn-primary graph-custom-hover">i</button>

使用实际的html。

提前感谢

Answer 1

[您似乎似乎没有在click事件上触发函数回调。而不是onClick={this.openModal}应该是onClick={this.openModal()}。

检查此演示：https://codesandbox.io/s/highcharts-react-demo-k30l0