图片 onClick 在 React 中失败答案

【问题标题】：image onClick failing in React图片 onClick 在 React 中失败
【发布时间】：2018-05-30 02:34:33
【问题描述】：

我有一个渲染图像的 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。

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

我在这里错过了什么？

【问题讨论】：

你使用的是什么版本的 react？这似乎在 15 上运行得很好。Here's a codepen
您的代码应该可以正常工作，我没有发现任何问题，我会尝试停止捆绑监视并重新运行编译
是的，我使用的是 React 15.6。我使用 React 已经有一段时间了，这是第一次真正让我不知所措。
哦，我忘了说我也在使用 React 样板
@ShahafAntwarg 我知道这似乎很简单，但它对我不起作用

标签： javascript reactjs events onclick

【解决方案1】：

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

【讨论】：

这个是一样的，实际上根据React的官方文档是不鼓励这样做的
谢谢你救了我们的命

【解决方案2】：

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

&lt;img src='/myfolder/myimage.png' onClick={this.imageClick} style={{"pointer-events": "all"}} /&gt;

【讨论】：

这是一个很久以前就解决的老问题了。不过，我感谢您的宝贵时间
帮我解决了！想知道他们为什么这样做！

【解决方案3】：

在我的情况下它确实有效：

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>

与prop (url) 传递给组件的相同版本，以及在单击图像时触发的state 修改，因为这两个在 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>

希望这会有所帮助！

【讨论】：

这对我也不起作用，谢谢你的时间
这很奇怪，因为这两个 sn-ps 确实有效。希望你能让它在你的环境中工作;-)
它们确实可以工作，但是当我将代码放回我的项目时，它们会停止工作。我认为我正在使用的东西会破坏正常行为。

【解决方案4】：

您的代码看起来不错，这是带有图像onClick 的工作示例。我已经在我的机器上测试了 Chrome 16.0 工作正常。

<!DOCTYPE html>
<html>
  <head>
    <title>React Image Click</title>
    <meta charset="utf-8">
    <script crossorigin src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16.0.0/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>

【讨论】：

这是我相同的代码。我感谢您的时间，但它也不适合我。我真的不知道这有什么问题。

【解决方案5】：

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

只要像上面那样定义方法，然后像这样调用函数

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

希望有效果

【讨论】：

这是一回事
你的rmethod为什么要大写？！？

【解决方案6】：

我找到了另一种方法来做到这一点...... 我将图像放在按钮标签中，并将该按钮设置为只显示图像。看看我的代码:-)

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

【讨论】：