Javascript 图像 onClick 在 React 中失败
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47839856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
image onClick failing in React
提问by assembler
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:
我有一个渲染图像的 React 组件。该图像必须捕获 onClick 事件，但它没有。这种行为没有任何理由。这是代码：
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.
我不明白为什么它不向我显示“点击！！！” 单击图像时浏览器控制台中的消息。它没有给我任何错误，没有警告，什么也没有。我正在使用在 Linux Mint 上运行的 Chrome 62.0.3202。
When isolated this code it works, but within boilerplate it does not, which is my case.
当隔离此代码时，它可以工作，但在样板文件中却没有，这就是我的情况。
What am I missing here?
我在这里缺少什么？
回答by Lucas Charvolin
class MyComponent extends React.Component {
render () {
const imageClick = () => {
console.log('Click');
}
return (
<div>
<img src={require('/myfolder/myimage.png') onClick={() => imageClick()} />
</div>
);
}
}
回答by Val
I've been playing with create-react-appand noticed that logo had pointer-eventscss style set to nonewhich disables all the clicks. Not sure if that is your case. Just try to override that style in your img:
我一直在玩create-react-app并注意到徽标的pointer-eventscss 样式设置为none禁用所有点击。不确定这是否是你的情况。只需尝试在您的 img 中覆盖该样式：
<img src='/myfolder/myimage.png' onClick={this.imageClick} style={{"pointer-events": "all"}} />回答by Philippe Sultan
Well it does work in my case :
那么它在我的情况下确实有效：
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>And the same version with a prop(url) passed to the component, as well as as statemodification triggered when you click the image, as those two are important in React :
与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>Hope this helps!
希望这可以帮助！
回答by Elumalai Kaliyaperumal
Your code looks fine and here is the working sample with image onClick. I have tested on my machine Chrome 16.0working fine.
您的代码看起来不错，这里是带有 image 的工作示例onClick。我已经在我的机器上测试Chrome 16.0工作正常。
<!DOCTYPE html>
<html>
<head>
<title>React Image Click</title>
<meta charset="utf-8">
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/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>
回答by kumaran ragunathan
ImageClick () {console.log('clicked');}
Just define the method as above and call the function like
只需定义上面的方法并调用函数
onClick={this.ImageClick.bind(this)}
onClick={this.ImageClick.bind(this)}
Hope it works
希望它有效
回答by Usman
I have Found an alternative way to do that .... I put image inside a button tag, and style that button to show nothing but image. take a Look at my code :-)
我找到了另一种方法来做到这一点......我将图像放在按钮标签中，并将该按钮设置为仅显示图像。看看我的代码:-)
<button style={{background:'none', border:'none'}}> <img
style={{cursor:'pointer'}}
src={prova}
type="submit"
onclick={() => setTimeout(this.handleBtnClick(touched, errors),1)}
/>
</button>
