REACT_MouseOver onMouseOver

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

onMouseOver 이벤트는 특정 tag 영역 안에 마우스 커서가 진입할 때 발생한다

 

- R069_onMouseOver.js

import { Component } from "react";

class R069_onMouseOver extends Component {
    MouseOver(tag) {
        console.log('TAG : ' + tag);
    }

    render() {
        return (
            <>
            <div onMouseOver = {e => this.MouseOver("div")}>
                <h3> DIV onMouseOver </h3>
            </div>
            <input type = "text" onMouseOver={e => this.MouseOver("input")}/>
            <select onMouseOver={e => this.MouseOver("select")}>
                <option value="react">react</option>
                <option value="200">200</option>
            </select>
            </>
        )
    }
}

export default R069_onMouseOver;

 

 

- App.js

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

import ReactonMouseOver from './R069_onMouseOver'
//import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

 

결과

해당 태그에 마우스 커서를 가져다 대면 f12 눌러서 consol 창에서 변하는 것을 확인할 수 있다