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就像自定义组件必须处理的其他任何道具一样。

示例

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

React的onMouseMove可在div上运行，但不能在自定义组件上运行？

1 个答案: