Its really simple. We need observe only 2 events for this, first one is onMouseOver, second one is onMouseOut. Logic of the program is changing state value on mouse over and mouse out. Lets look into this program

To Run Example Code

execute below commands
npm install
npm start
now open index.html in browser

Program

handleMouseOver, handleMouseOut changes the state value on mouse over
import React from 'react'

class ExampleApplication extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
       imgSrc: 'http://demo.sodhanalibrary.com/images/twitter_blue.png'
    };
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.handleMouseOut = this.handleMouseOut.bind(this);
  }

  handleMouseOver() {
    this.setState({
      imgSrc: 'http://demo.sodhanalibrary.com/images/twitter_brown.png'
    });
  }

  handleMouseOut() {
    this.setState({
      imgSrc: 'http://demo.sodhanalibrary.com/images/twitter_blue.png'
    });
  }

  render() {
    return (
      <div>
        <img onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} src={this.state.imgSrc}/>
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;

0 comments:

Blogroll

Follow this blog by Email

Popular Posts