REACT_MouseOut

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

onMuseOut 이벤트는 특정 tag 영역 안에서 마우스 커서가 진입했다가 벗어날 때 발생한다

 

- R070_onMouseOut.js

import { Component } from "react";

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

    render() {
        return(
            <>
            <div onMouseOut = {e => this.MouseOut("div")}>
                <h3>DIV onMouseOut</h3>
            </div>
            <input type="text" onMouseOut = {e => this.MouseOut("input")}/>
            <select onMouseOut = {e => this.MouseOut("select")}>
                <option value = "react">react</option>
                <option value = "200">200</option>
            </select>
            </>
        )
    }
}
export default R070_onMouseOut;

 

- App.js

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

import ReactonMouseOut from './R070_onMouseOut'
//import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

 

결과