图表 js：在圆环图切片上添加 onclick 事件在 react-chartjs-2 中不起作用

Question

我试图在一片甜甜圈上添加 onclick 功能，它在 console.log 上工作正常，但如果调用检查功能则无法工作。它的支票未定义。

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;

Answer 1

您无权访问函数中的 'this'，因此您可以绑定它或使用如下所示的箭头函数

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

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

图表 js：在圆环图切片上添加 onclick 事件在 react-chartjs-2 中不起作用

Chart js :Adding onclick event on slice of doughnut chart is not working in react-chartjs-2

javascript

user-interface

reactjs

chart.js

chart.js2