如何使 onMouseDown 事件适用于由 React.createRef() 创建的 canvas？

Question

我正在尝试使鼠标事件在通过 React.createRef() 创建的 canvas 上工作。 我只从这个stackoverflow的下面的代码片段中引用了它，它工作得很好：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

export default class canvas extends React.Component{
    constructor(props) {
        super(props);
        //added state 
        this.state={
            isDown: false,
            previousPointX:'',
            previousPointY:''
        }
        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.handleMouseUp = this.handleMouseUp.bind(this);
    }
    render() {
        return (
            <div>    
                <canvas id="canvas" ref="canvas"
                        width={640}
                        height={425}
                        onMouseDown={
                            e => {
                                let nativeEvent = e.nativeEvent;
                                this.handleMouseDown(nativeEvent);
                            }}
                        onMouseMove={
                            e => {
                                let nativeEvent = e.nativeEvent;
                                this.handleMouseMove(nativeEvent);
                            }}    
                        onMouseUp={
                            e => {
                                let nativeEvent = e.nativeEvent;
                                this.handleMouseUp(nativeEvent);
                            }}
                />
            </div>    
        );
    }

    handleMouseDown(event){ //added code here
        console.log(event);    
        this.setState({
            isDown: true,
            previousPointX:event.offsetX,
            previousPointY:event.offsetY
        },()=>{    
            const canvas = ReactDOM.findDOMNode(this.refs.canvas);    
            var x = event.offsetX;
            var y = event.offsetY;
            var ctx = canvas.getContext("2d");
            console.log(x,y);
            ctx.moveTo(x,y);
            ctx.lineTo(x+1,y+1);
            ctx.stroke();
        })
    }
    handleMouseMove(event){

    }
    handleMouseUp(event){
        this.setState({
            isDown: false
        });
        //if(this.state.isDown){
            const canvas = ReactDOM.findDOMNode(this.refs.canvas);
            var x = event.offsetX;
            var y = event.offsetY;
            var ctx = canvas.getContext("2d");

            ctx.moveTo(this.state.previousPointX,this.state.previousPointY);
            ctx.lineTo(x,y);
            ctx.stroke();
            ctx.closePath();
        //}
    }
    componentDidMount() {
        const canvas = ReactDOM.findDOMNode(this.refs.canvas);
        const ctx = canvas.getContext("2d");
        ctx.fillStyle = 'rgb(200,255,255)';
        ctx.fillRect(0, 0, 640, 425);
    }
}

下面的链接是我尝试使用 createRef。 除了 mousedownevent 之外，该部件的 rest 正在工作。 根据上述代码行为使 mousedown 事件工作的任何帮助都将非常有帮助。
https://codesandbox.io/s/loving-hertz-4fjdnz?file=/src/App.js
谢谢。

Answer 1

失败的原因是您绑定 function 的方式。 在您的代码中，该方法被立即调用（没有参数），这就是页面崩溃的原因。 这是我正在谈论的示例中的代码：

canvas_page.onmousedown = this.MouseDownEvt();

一个更好的方法是这样的：

canvas_page.onmousedown = this.MouseDownEvt.bind(this);

这将传递对方法本身的引用，该方法将正确填充e参数。