IT

react sample img tag

roselumi 2019. 4. 4. 03:07

import React, { Component } from 'react';

import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';

import 'ag-grid-community/dist/styles/ag-theme-balham.css';

import plusIcon from './image/plus.png';

import minusIcon from './image/minus.png';

import starIcon from './image/star.jpg';

import whiteIcon from './image/001.JPG';

 

class App extends Component {

constructor(props) {

super(props);

this.state={

hover: false,

imgSrc: starIcon,

width: 50,

height: 50,

displays: 'block',

 

};

}

handleMouseOver = () =>{

this.setState({

imgSrc: plusIcon,

});

}

handleMouseOut = () =>{

this.setState({

imgSrc: whiteIcon,

});

}

imageClick = () =>{

alert('뽜이팅');

}

 

render() {

return (

<div>

<img

src={this.state.imgSrc}

// onMouseOver={(e) => console.log('adsfadsfsadfasdfadsf')}

onMouseOver={this.handleMouseOver}

onMouseOut={this.handleMouseOut}

onClick={this.imageClick}

// style={{display: this.state.displays}}

/>

{/* <img src={minusIcon} width="50" height="50" alt="그림 설명"/> */}

</div>

);

}

}

 

export default App;