Question

我有一个呈现图像的React组件。该图像必须捕获onClick事件，但它没有。这种行为没有理由。这是代码：

class MyComponent extends React.Component {

   imageClick = () => {
      console.log('Click!!!!');
   }       

   render () {
      return (
         <div>
            <img src='/myfolder/myimage.png' onClick={this.imageClick} />
         </div>
      );
   }
}

我无法理解为什么它没有向我显示“点击!!!!＆＃39;单击图像时，浏览器控制台中的消息。它给了我没有错误，没有警告，没有任何东西。我正在使用在Linux Mint上运行的Chrome 62.0.3202。

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

我在这里缺少什么？

Answer 1

unsigned char info[54];
fread_s(info, sizeof(info), sizeof(info), 1, fileptr);

unsigned int width = *(unsigned int*)(info + 18);
unsigned int height = *(unsigned int*)(info + 22);
unsigned int bitcount = *(unsigned int*)(info + 28);

printf("%d %d %d\n", width, height, bitcount);

Answer 2

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

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

Answer 3

在我的案例中确实有效：

Logout '; } if ($_SESSION['use'] = NULL) { echo ' Login '; } ?>

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>（url）的相同版本传递给组件，以及单击图像时触发的prop修改，因为这两个在React中很重要：

state

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

希望这有帮助！

Answer 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>

Answer 5

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

只需定义上述方法并调用函数

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

希望它有效

Answer 6

我找到了另一种方法...。我将图像放在按钮标签中，并对按钮进行样式设置，使其仅显示图像。看一下我的代码：-）

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

图像onClick在React中失败

6 个答案: