在React组件上处理鼠标事件

Question

我正在尝试使用像onMousemove这样的JavaScript鼠标事件来在React组件上创建DOM元素，但我面临着一个小故障。

我有一个正常运行的vanilla JavaScript版本。

这是我破损的代码：https://codesandbox.io/s/vmvvr25147

这是一个有效的vanilla javascript版本：http://jsfiddle.net/d9BPz/546/

这是我的主要内容：

import React from 'react';
import { Popup, Image } from 'semantic-ui-react';

import './ManageRectangleHotSpots.css';

class ManageRectangleHotSpots extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      dimensions: {
        width: 0,
        height: 0
      },
      mouse: {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
      }
    }
  }

  canvas = null;
  element = null;

  setMousePosition = (e) => {
    this.setState({
      mouse: {
        ...this.state.mouse,
        x: e.nativeEvent.offsetX,
        y: e.nativeEvent.offsetY
      }
    });
  }

  onMouseMove = (e) => {
    this.setMousePosition(e);
    if (this.element !== null) {

      console.log(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
      this.element.style.width = Math.abs(this.state.mouse.x - this.state.mouse.startX) + 'px';
      this.element.style.height = Math.abs(this.state.mouse.y - this.state.mouse.startY) + 'px';
      this.element.style.left = (this.state.mouse.x - this.state.mouse.startX < 0) ? this.state.mouse.x + 'px' : this.state.mouse.startX + 'px';
      this.element.style.top = (this.state.mouse.y - this.state.mouse.startY < 0) ? this.state.mouse.y + 'px' : this.state.mouse.startY + 'px';
    }
  }

  onMouseDown = (e) => {
    console.log("begun.");
    this.setState({
      mouse: {
        ...this.state.mouse,
        startX: this.state.mouse.x,
        startY: this.state.mouse.y
      }
    });

    this.element = document.createElement('div');
    this.element.className = 'rectangle'
    this.element.style.left = this.state.mouse.x + 'px';
    this.element.style.top = this.state.mouse.y + 'px';

    this.canvas.appendChild(this.element)
    this.canvas.style.cursor = "crosshair";

  }

  onMouseUp = (e) => {

    this.element = null;
    this.canvas.style.cursor = "default";
    this.setState({
      x: 0,
      y: 0,
      startX: 0,
      startY: 0
    });

    console.log("finsihed.");
  }

  setCanvas = (c) => {
    this.canvas = c;
  }

  onLoadImg = (e) => {
    this.setState({
      dimensions: {
        width: e.target.width,
        height: e.target.height
      }
    });
  }

  render() {
    return(
      <div className="wrapper">     
        <Image src={this.props.imagePath} onLoad={ this.onLoadImg } />    
        <div className="canvasWrapper" >
          <div 
            className="canvas" 
            style={{ width: this.state.dimensions.width, height: this.state.dimensions.height }} 
            ref={ this.setCanvas } 
            onMouseDown={ this.onMouseDown }
            onMouseUp={ this.onMouseUp }
            onMouseMove={ this.onMouseMove }
            >
          </div> 
        </div>
      </div>
    );
  }
}

export default ManageRectangleHotSpots;