Javascript 使用React使轴在Plotly.js中可单击

我想使图表中的x轴可单击，并在单击时运行函数。我尝试了以下代码，但没有成功

如何使函数

handleClick

在单击x轴上的标签时执行

export default class MyComponent extends React.Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    let axis = {
        0: 1,
        1: 1,
        2: 1,
    }

    handleClick(){
        //Do something
    }

    render(){
        let xAxis = [];
        let yAxis = [];

    
        for(let i = 0; i < 3; ++i){
            xAxis.push('<a href="#" onClick="{ handleClick }">' + axis[i] + '</a>');
            yAxis.push(1);
        }

        Plotly.newPlot( document.getElementById('myDiv'), [{
            type: 'bar',
            marker: { color: 'rgb(255, 165, 0)' },
            name: 'MyPlot',
            x: xAxis,
            y: yAxis }],
            {
                margin: {t: 10, b:5},
            }
        );
        return (
            <div id="myDiv" style={{width: '95%', height: '100%'}}></div>
        );
    }
}

导出默认类MyComponent扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
设轴={
0: 1,
1: 1,
2: 1,
}
handleClick（）{
//做点什么
}
render（）{
设xAxis=[]；
设yAxis=[]；
for（设i=0；i<3；++i）{
X轴推力（“”）；
yAxis.push（1）；
}
Plotly.newPlot（document.getElementById（'myDiv'）[{
类型：'bar'，
标记：{color:'rgb（255，165，0）}，
名称：“MyPlot”，
x:xAxis，
y:yAxis}]，
{
边距：{t:10，b:5}，
}
);
返回(
);
}
}

我通过以下答案解决了这个问题：