Question

我有一个简单的div，它具有获取该div内鼠标坐标的功能。

<div onMouseMove={this._onMouseMove}></div>

此功能保存状态div的坐标

constructor() {
    super();
    this.state = {
      selectedVariables: [],
      mouseCordinates: {x: 0, y: 0}
    };
  }

  _onMouseMove = e => {
    this.setState({x: e.screenX, y: e.screenY});
    console.log(`x: ${e.screenX}, y: ${e.screenY}`);
  }

现在我要在这些div中以这些具体坐标绘制变量 helloWorld

helloWorld = 'Hello World';

<div onMouseMove={this._onMouseMove}>
  // Into this div it must paint the variable according to the coordinates
</div>

这可能吗？有什么想法吗？

感谢您的帮助。

Answer 1

您可以使用以下答案作为起点：

helloWorld = 'Hello World';

<div onMouseMove={this._onMouseMove}>
  // Into this div it must paint the variable according to the coordinates
<div style=`position:relative;left:${this.state.mouseCoordinates.x},
 top:${this.state.mouseCoordinates.y}`>{helloWorld}</div>
</div>

我知道我的样式是错误的，因为我正在使用x和y坐标在left中指定top和position:relative，但是希望您可以对此进行调整才能达到预期的效果。

使用React JS是否可以根据鼠标的位置来放置文本？

1 个答案: