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

问题描述

我有一个渲染图像的 React 组件.该图像必须捕获 onClick 事件，但它没有.这种行为没有理由.代码如下:

class MyComponent 扩展 React.Component {图像点击 = () =>{console.log('点击！！！');}使成为 () {返回 (
<img src='/myfolder/myimage.png' onClick={this.imageClick}/></div>);}}

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

当隔离此代码时，它可以工作，但在样板文件中却不能，这是我的情况.

我在这里错过了什么?

解决方案

class MyComponent extends React.Component {使成为 () {const imageClick = () =>{console.log('点击');}返回 (
<img src={require('/myfolder/myimage.png')} onClick={() =>imageClick()}/></div>);}}

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?

解决方案

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屋！