图像onClick在React中失败 [英] image onClick failing in React

问题描述

我有一个React组件来渲染图像.该图像必须捕获onClick事件，但不是.没有这种行为的原因.这是代码:

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>
      );
   }
}

我不明白为什么它没有显示出我对点击！！！"的支持.单击图像时在浏览器控制台中显示一条消息.它没有任何错误，没有警告，没有任何错误.我正在使用在Linux Mint上运行的Chrome 62.0.3202.

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.

我在这里想念什么?

推荐答案

class MyComponent extends React.Component {      

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

这篇关于图像onClick在React中失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！