javascript - React 中的图像 onClick 失败

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

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