图像onClick在React中失败

Question

我有一个呈现图像的React组件.该图像必须捕获onClick事件,但事实并非如此.这种行为没有理由.这是代码:

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.

当它被隔离时这个代码可以工作,但是在样板文件中却没有,这就是我的情况.

我在这里错过了什么？

Answer 1

我一直在玩create-react-app并注意到徽标的pointer-eventscss 样式设置为none禁用所有点击。不确定这是否是你的情况。只需尝试在您的 img 中覆盖该样式：

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

Answer 2

class MyComponent extends React.Component {      

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