如何使onMouseDown事件适用于React.createRef()创建的画布

Question

我正试图让鼠标事件在通过React.createRef((创建的画布上工作。我从下面的代码片段中引用了这个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的尝试。除了鼠标下风口，其余部分都在工作。任何使mousedown事件按照上述代码行为工作的帮助都将非常有用
https://codesandbox.io/s/loving-hertz-4fjdnz?file=/src/App.js
谢谢。

Answer 1

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

canvas_page.onmousedown = this.MouseDownEvt();

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

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

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