REACT_MouseMove onMouseMove

react 에서는 onMouseMove 이벤트도 camelCase 형식의 명칭을 사용한다

onMouseMove 이벤트는 특정 tag 영역 안에서 마우스 커서가 움직일 때 발생한다

 

- R068_onMouseMove.js

import React, { Component } from 'react';

class R068_onMouseMove extends Component {
    MouseMove(tag) {
        console.log('TAG: ' + tag);
    }
    
    render() {
        return(
            <>
            <div onMouseMove = {e => this.MouseMove("div")}>
                <h3>DIV onMouseMove</h3>
            </div>
            <input type ="text" onMouseMove = {e => this.MouseMove("input")}/>
            <select onMouseMove = {e => this.MouseMove("select")}>
                <option value = "react">react</option>
                <option value = "200">200</option>
            </select>
            </>
        )
    }
    
}

export default R068_onMouseMove;

 

- App.js

import React from 'react';
//import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactonMouseMove from './R068_onMouseMove'
//import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <ReactonMouseMove/>
    </div>
  );
}

export default App;

 

결과

마우스를 움직일 때 마다 마우스의 움직임에 따라 변한다 f12 눌러서 consol창 확인가능하다