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;

1 comment:

  1. Nice writing style. Looking forward to reading more from you.,I finally decided to write a comment on your blog. I just wanted to say good job. I really enjoy reading your posts.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts