CODEWITHSUNDEEP
javascriptreactjseventsonclick
assembler
assembler

Reputation: 3300

image onClick failing in React

I have a React component which renders an image. That image has to capture the onClick event, but it doesn't. There is no reason for this behavior. Here is the code:

class MyComponent extends React.Component {

   imageClick = () => {
      console.log('Click!!!!');
   }       

   render () {
      return (
         <div>
            <img src='/myfolder/myimage.png' onClick={this.imageClick} />
         </div>
      );
   }
}

I can't see why it doesn't shows me back the 'Click!!!!' message in the browsers console when click on the image. It gives me back no error, no warning, no nothing. I'm using Chrome 62.0.3202 running on Linux Mint.

When isolated this code it works, but within boilerplate it does not, which is my case.

What am I missing here?

Upvotes: 13

Views: 86061

Answers (6)

Lucas Charvolin
Lucas Charvolin

Reputation: 327

class MyComponent extends React.Component {      
  
     render () {
        const imageClick = () => {
          console.log('Click');
        } 
        return (
           <div>
              <img src={require('/myfolder/myimage.png')} onClick={() => imageClick()} />
           </div>
        );
     }
  }

Upvotes: 20

Usman
Usman

Reputation: 33

I have Found an alternative way to do that .... I put image inside a button tag, and style that button to show nothing but image. take a Look at my code :-)

 <button style={{background:'none', border:'none'}}>
   <img
     style={{cursor:'pointer'}}
     src={prova}
     type="submit"
     onclick={() => setTimeout(this.handleBtnClick(touched, errors),1)}
   />
 </button>

Upvotes: 0

Valentyn Derkach
Valentyn Derkach

Reputation: 451

I've been playing with create-react-app and noticed that logo had pointer-events css style set to none which disables all the clicks. Not sure if that is your case. Just try to override that style in your img:

<img src='/myfolder/myimage.png' onClick={this.imageClick} style={{"pointer-events": "all"}} />

Upvotes: 23

kumaran ragunathan
kumaran ragunathan

Reputation: 447

ImageClick () {console.log('clicked');}

Just define the method as above and call the function like

onClick={this.ImageClick.bind(this)}

Hope it works

Upvotes: 0

Philippe Sultan
Philippe Sultan

Reputation: 2318

Well it does work in my case :

class MyComponent extends React.Component {

  imageClick = () => {
    console.log('Click!!!!');
  }       

  render () {
    return (
      <div>
        <img src='http://www.libpng.org/pub/png/img_png/obj_64x64.png' onClick={this.imageClick} />
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

And the same version with a prop (url) passed to the component, as well as as state modification triggered when you click the image, as those two are important in React :

class MyComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      clicked : false
    }
  }

  imageClick = () => {
    console.log('Click!!!!');
    this.setState({
      clicked: true
    })
  }       

  render () {
    return (
      <div>
        <img src={ this.props.url } onClick={this.imageClick} />
        {
          this.state.clicked &&
          <div>You clicked me!</div>
        }
      </div>
    );
  }
}

ReactDOM.render(<MyComponent url="http://www.libpng.org/pub/png/img_png/obj_64x64.png" />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Hope this helps!

Upvotes: 2

Elumalai Kaliyaperumal
Elumalai Kaliyaperumal

Reputation: 1520

Your code looks fine and here is the working sample with image onClick. I have tested on my machine Chrome 16.0 working fine.

<!DOCTYPE html>
<html>
  <head>
    <title>React Image Click</title>
    <meta charset="utf-8">
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/jsx">
      class MyComponent extends React.Component {
          imageClick = () => {
            console.log('Click!!!!');
          }       

          render () {
            return (
               <div>
                  <img src='/myfolder/myimage.png' onClick={this.imageClick} />
               </div>
            );
          }
      }

      ReactDOM.render(
        <MyComponent />, 
        document.getElementById("app")
      );
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Upvotes: 1

Related Questions