React 之鼠标移动显示实时位置

实现目标： 通过鼠标移动事件，获取实时鼠标位置信息，再将位置信息更新在页面上

鼠标位置实现思路：

• 要设置 state，用来保存鼠标的 横纵坐标
• 要注册mousemove事件，实时获取鼠标当前的位置，并保存到state中
  mousemove事件要注册给window （在 componentDidMount 方法中进行注册）
• 将 state 的值设置 页面要显示鼠标位置的地方

import React from 'react'
import ReactDOM from 'react-dom'



class Mouse extends React.Component {
  // 定义鼠标的xy坐标
  state = {
    x: 0,
    y: 0
  }
  // 定义鼠标移动事件，实时更新鼠标位置
  handleMoveMouse = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }

  // 为整个window加上mousemove事件
  componentDidMount () {
    window.addEventListener('mousemove', this.handleMoveMouse)
  }

  render () {
    return (
      <div>
        鼠标坐标: {this.state.x}  {this.state.y}
      </div>
    )
  }
}
ReactDOM.render(<Mouse/>, document.getElementById('root'))

飞翔的小蜜蜂

实现思路：

• 能够实时获取鼠标当前的位置
• 图片要设置绝对定位，top的值要实时和鼠标坐标的y相等，left的值要实时和鼠标坐标的x相等

导入图片：

import img from '../src/images/fee.jpg'
render () {
    return (
        // alt 不能省略
         <img 
          src={img} 
          alt="小呀小蜜蜂，飞到花丛中" />
    )
}

css代码：

img {
  position: absolute;
  width: 100px;
  height: 100px;
}

完整代码：

import React from 'react'
import ReactDOM from 'react-dom'
import img from '../src/images/fee.jpg'
import './css/b.css'
class Mouse extends React.Component {
  // 定义鼠标的xy坐标
  state = {
    x: 0,
    y: 0
  }
  // 定义鼠标移动事件，实时更新鼠标位置
  handleMoveMouse = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }

  // 为整个window加上mousemove事件
  componentDidMount () {
    window.addEventListener('mousemove', this.handleMoveMouse)
  }

  render () {
    return (
      <div>
        <img 
          src={img} 
          alt="小呀小蜜蜂，飞到花丛中" 
          // 随时将鼠标位置设置为图片位置
          style={{left: this.state.x - 50, top: this.state.y - 50}} 
        />
      </div>
    )
  }
}
ReactDOM.render(<Mouse/>, document.getElementById('root'))

效果图：