我有一个渲染图像的 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。
当隔离此代码时，它可以工作，但在样板文件中却没有，这就是我的情况。
我在这里错过了什么？
class MyComponent extends React.Component {
render () {
const imageClick = () => {
console.log('Click');
}
return (
<div>
<img src={require('/myfolder/myimage.png')} onClick={() => imageClick()} />
</div>
);
}
}
我一直在玩create-react-app并注意到徽标的pointer-eventscss 样式设置为none禁用所有点击。不确定你的情况是否如此。只需尝试在您的 img 中覆盖该样式：
<img src='/myfolder/myimage.png' onClick={this.imageClick} style={{"pointer-events": "all"}} />那么它在我的情况下确实有效：
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>希望这可以帮助！
您的代码看起来不错，这里是带有 image 的工作示例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>