javascript - React 的 onMouseMove 在 div 上工作但不在自定义组件上工作？

Question

我想记录，每当用户将鼠标移到我的 <Canvas /> 上时组件和控制台记录坐标。

这个有效:

<div onMouseMove={this._onMouseMove.bind(this)}>
  <Canvas 
    dataURL={this.state.image} 
    textTop={this.state.textTop} 
    textBottom={this.state.textBottom} 
    fontSize={this.state.fontSize} />
  </div>
</div>

但这不是(将 onMouseMove 从 div 移动到 Canvas Component 本身):

<div>
  <Canvas 
    onMouseMove={this._onMouseMove.bind(this)}
    dataURL={this.state.image} 
    textTop={this.state.textTop} 
    textBottom={this.state.textBottom} 
    fontSize={this.state.fontSize} />
  </div>
</div>

我在这里做错了什么？

PS: 补充一下:

_onMouseMove(e) {
    console.log(e.screenX);
    console.log(e.screenY);
  }

Answer 1

onMouseMove 就像您的自定义组件必须自行处理的任何其他 Prop 一样。

示例

class Canvas extends React.Component {
  render() {
    return <canvas onMouseMove={this.props.onMouseMove} />;
  }
}