Javascript 反应点击更改图片

我正在创建一个包含许多图片的页面。如果你点击一张图片，它应该会改变。我试着切换状态，但它的工作方式不是我想要的：它会改变所有的照片，如果你只点击一个

然后我尝试使用这段代码，但它根本不起作用（甚至不记录）

从“../../img/bag1.jpg”导入bag1
onClickHandler=（e）=>{
设src=（e.target.src | | e.srcmelement.src）；
if（src=={bag0}）{
console.log（“它工作”）
}
}
render（）{
返回(
)
}

如果这有帮助，下面是一个工作示例

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
这是defaultImagehttps://cdn0.iconfinder.com/data/icons/30-hardware-line-icons/64/Search-64.png';
此.state={
选择图像：this.defaultImage，
}
this.onClickHandler=this.onClickHandler.bind（this）；
}
onClickHandler（e）{
const src=e.target.src；
if（src==this.defaultImage）{
this.setState（{selectedImage:'https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-64.png' });
}
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））

没有足够的信息来帮助您。
src=={bag0}
将始终是
false
。为什么会是false？
bag0
似乎在任何时候都不会改变。如果你想更改
src
，你需要传递一些你控制的东西，比如状态变量或道具。谢谢你，Tareq！我试过类似的方法。这里的问题是，我需要在同一页上有许多图片，如果你点击它们，这些图片会发生变化（而不是同时发生变化）。你在寻找滑块/旋转木马库吗？尝试