Javascript 为什么赢了'；单击画布时，我的计数器不工作吗？

我想增加通过

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;

此
在功能范围内。因此，您需要绑定此

：

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

---

此外，我建议您使用arrow函数，并将setState与如下更新程序一起使用：

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

---

此

在功能范围内。因此，您需要绑定此：

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

---

此外，我建议您使用arrow函数，并将setState与如下更新程序一起使用：

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

---

谢谢，我在这一个上犯了一些粗心的错误。@sp92没问题谢谢，我在这一个上犯了一些粗心的错误。@sp92没问题