在ReactJs中使用画布上的鼠标事件绘制直线

componentDidMount() {
  const canvas = this.refs.canvas;
  this.ctx = canvas.getContext('2d');
  canvas.addEventListener('mousedown', this.handleMouseDown);
  canvas.addEventListener('mousemove', this.handleMouseMove);
  canvas.addEventListener('mouseup', this.handleMouseUp);
}

handleMouseDown = (e) => {
  this.isDrawing = true;
  const { offsetX, offsetY } = e.nativeEvent;
  this.startX = offsetX;
  this.startY = offsetY;
}

handleMouseMove = (e) => {
  if (!this.isDrawing) return;
  const { offsetX, offsetY } = e.nativeEvent;
  this.endX = offsetX;
  this.endY = offsetY;
  this.drawLine();
}

handleMouseUp = () => {
  this.isDrawing = false;
}

drawLine = () => {
  this.ctx.clearRect(0, 0, this.refs.canvas.width, this.refs.canvas.height);
  this.ctx.beginPath();
  this.ctx.moveTo(this.startX, this.startY);
  this.ctx.lineTo(this.endX, this.endY);
  this.ctx.stroke();
}

render() {
  return <canvas ref="canvas" width={800} height={600} />;
}