Почему мой счетчик не работает при нажатии на холст?

Question

Я хочу увеличить число нажатий на шар, который подпрыгивает в браузере, с помощью this.setState({count: this.state.count + 1});. Я подумал, что то, что у меня есть в моем коде, должно работать, потому что я делал это раньше, не используя canvas, но это не работает.

Что я делаю не так в своем коде и как я могу это исправить?

import React, { Component } from 'react';
import './Main.css';

class Main extends Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 0
        };
    }

    componentDidMount() {
        let c = document.getElementById("mycanvas");
        let cxt = c.getContext("2d");
        let x = 0;
        let y = 0;
        let r = 10;
        let dx = 4;
        let dy = 8;
        let WIDTH = 240;
        let HEIGHT = 240;

        c.onclick = function () {
            this.setState({count: this.state.count + 1});
        };

        function init() {
            window.requestAnimationFrame(init, cxt);
            draw();
        }

        function drawCircle(x, y, r) {
            cxt.clearRect(0, 0, 240, 240);
            cxt.beginPath();
            cxt.arc(x, y, r, 0, Math.PI * 2, false);
            cxt.fillStyle = "#006699";
            cxt.fill();
        }

        function draw() {
            drawCircle(x, y, r);

            if(x + dx > WIDTH || x + dx < 0) {
                dx = -dx;
                // console.log(dx);
            }

            if(y + dy > HEIGHT || y + dy < 0){
                dy = -dy;
            }

            x += dx;
            y += dy;
        }
        init();
    }

    render() {
        return(
            <div>
                <canvas id="mycanvas" width="240" height="240"/>
                <h1>{this.state.count}</h1>
            </div>
        );
    }
}

export default Main;

Вот ошибка:

TypeError: Cannot read property 'count' of undefined
HTMLCanvasElement.c.onclick
src/containers/Main/Main.js:25
  22 | let HEIGHT = 240;
  23 | 
  24 | c.onclick = function () {
> 25 |     this.setState({count: this.state.count + 1});
  26 | };
  27 | 
  28 | function init() {

Answer 1

this - это window внутри области действия функции. Итак, вам нужно будет связать this:

c.onclick = function () {
   this.setState({count: this.state.count + 1});
}.bind(this);

---

Далее, я предлагаю вам использовать функцию стрелки и использовать setState с таким средством обновления, как это:

c.onclick = () => {
  this.setState(prevState => ({count: prevState.count+1})
}