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

红太狼 2023-01-12 11:55 457阅读 0赞

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

# 鼠标位置 #

实现思路：

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'))

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]: /images/20221119/be95d1080930472eb5f382c04fe97b98.png