React - onMouseDown/onMouseUp 不会对左键单击触发

Question

我正在一个react组件中使用HTML画布处理鼠标事件，但是遇到一个问题，即鼠标左键的onMouseDown和onMouseUp事件无法触发。右键和中键可以正常工作。

handleMouseDown(event)
{
    console.log("mouse down");
}

handleMouseMove(event)
{
    console.log("mouse move");
}

handleMouseUp(event)
{
    console.log("mouse up");
}

render() {
    return (
        <div
            className="chart">
            <canvas
                id="canvas"
                onMouseDown={this.handleMouseDown}
                onMouseMove={this.handleMouseMove.bind(this)}
                onMouseUp={this.handleMouseUp.bind(this)} />
        </div>
    );

有没有人有过这样的经验？

编辑注意：我正在尝试获取鼠标按下事件发生的X/Y坐标。

- sean le roy

Answer 1

您可以使用onClick处理鼠标左键单击事件：

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event){
    const yCoord = event.y;
    const xCoord = event.x;
    console.log("Y Coordinate = " + yCoord + 
    "\n X Coordinate = " + xCoord + ".");
    
    switch(event.which) {
      case 1: {
        console.log('Left Mouse button pressed.');
        break;
      }
      case 2: {
        console.log('Middle Mouse button pressed.');
        break;
      }
      case 3: {
        console.log('Right Mouse button pressed.');
        break;
      }
      default: {
        console.log('You have a strange Mouse!');
      }
    }
  }
  
  render() {
    return (
      <div className="chart">
        <canvas id="canvas" 
          onClick={(e) =>{this.handleClick(e.nativeEvent)}}
          onContextMenu={(e) =>
            {this.handleClick(e.nativeEvent)}}>
        </canvas>
      </div>
    );
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('container')
);

.chart {
  width: 100;
  height: 100;
}

#canvas {
  border: 1px black solid;
  width: 50;
  height: 50;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

- Andrew Allison

---

虽然这样做是可以的，但我正在处理一个图形，并需要鼠标按下时的x/y坐标。 - sean le roy

不用担心，鼠标按下的x/y坐标也可以在event对象中找到。请参考更新后的答案以获取该信息。 - Andrew Allison

谢谢Andrew，这肯定让我得到了一些结果，但仍然存在一个问题，我需要在用户点击时获取事件。onClick似乎只会在鼠标抬起后触发，但我需要能够点击屏幕上的对象并将其拖动到另一个位置。奇怪的是，我有另一个应用程序，那里的鼠标事件工作得非常好，但我看不出我在做什么不同。 - sean le roy

搞定了，Andrew。我在另一个画布上面添加了第二个画布，现在事件可以正常工作了。感谢你的帮助！ - sean le roy

Answer 2

事件处理程序也可以是箭头函数。请查看React文档处理事件，了解更多信息。

- baz

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分，并提供参考链接。仅有链接的答案如果链接页面发生更改，则可能变得无效。- 来自审查 - user16217248