React之运用组件获取鼠标实时位置信息

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

鼠标位置

实现思路：

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

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


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

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

  render () {
    
    
    return (
      <div>
        鼠标坐标: {
    
    this.state.x} - {
    
    this.state.y}
      </div>
    )
  }
}

ReactDOM.render(<Mouse />, document.querySelector('#app'))

飞翔的大猪

实现思路：

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

导入图片：

import img from './assets/images/pig.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 './assets/css/pig.css'
import img from './assets/images/pig.jpg'

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

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

  render () {
    
    
    return (
      <div>
        <img 
          src={
    
    img} 
          alt="飞翔的大猪" 
          // 随时将鼠标位置设置为图片位置
          style={
    
    {
    
    left: this.state.x - 50, top: this.state.y - 50}} 
        />
      </div>
    )
  }
}

ReactDOM.render(<Pig />, document.querySelector('#app'))

效果：