Chart js：在甜甜圈图切片上添加onclick事件在react-chartjs-2中不起作用

问题描述

我试图在一片甜甜圈上添加onclick功能，它对于console.log正常工作，但是如果调用check函数，则无法正常工作。它的给予检查是不确定的。

class DoughnutChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  check = (x,b) => {
    console.log("test check");
  };
  render() {
    return (
      <div>
        <Doughnut
          data={data}
          height={1}
          width={1}
          options={{
            responsive: true,maintainAspectRatio: true,cutoutPercentage: 85,tooltips: false,onClick: function (evt,item) {
              check("source",data.datasets[0].data[item[0]._index]);
              console.log("test");
            },}}
        />
      </div>
    );
  }
}
export default DoughnutChart;

解决方法

您无权访问此功能中的“ this”，因此您可以绑定此功能或使用如下所示的箭头功能

      onClick: (evt,item) =>{
          this.check("source",this.state.data.datasets[0].data[item[0]._index]);
          console.log("test");
        },

此外，您还必须调用this.check并使用this.state.data