React解决点击小图用对话框放大图片（通过e.target.n

最近两周一直在忙，忙H5页面，忙项目更替，以至于上上周一测试提的Bug到现在才算解决完。

这是同事在很早以前写的一段程序，在系统的 个人中心 里有 我的动态 这么一个模块，里面显示的内容是文字+图片。不得不吐槽一下，首页有个差不多的模块，为啥首页能正常显示而个人中心却要弄个这么大个图。

图片太大以至于看不懂是“什么鬼”

话不多说，直接来到代码部分。先把样式调整成合适的比例，找到对应的样式文件，修改宽高和左间距。

样式文件 样式修改后的效果

下面我们看一下图片是通过什么方式写到页面里面去的。

用字符串拼接的图片

本人比较耿直，一开始想到的最直接暴力的方法就是在`<img />`里面加onClick呗，但不知道是我一开始就错了还是猜的全没碰对，以至于到最后我放弃了在img元素里加方法来获取每张图片的src。大家都知道在反单引号里面可以通过${}来拿到值放到字符串里做拼接，但是要引用方法还真是挺为难的（不能普通的字符串拼接和两对反单引号做拼接的情况下）。既然不能把onClick放到img上，那就放它的父元素上吧（最后不知道怎么想出来的一个办法）。

在父元素上添加onClick方法，e做参数 具体方法

敲黑板，第二个 if 是重点。因为我们的onClick是放在<img>所在的父元素<div>上的，所以用户点击父元素的任何一个角落都会触发同一个事件。于是要加以区分，只有让用户点在<div>的<img>上方法才去作用，否则啥事都不发生。具体可以在方法里先console.log(e.target.nodeName)看看，如果点在图片外的部分返回的是“DIV”，而点在图片上返回的则是“IMG”，这就是我们要找的区别。

以上就是我在这个Bug中遇到的坑，总结下来就是：不要试图直接在反单引号上加事件，可以加到父元素上去。下面贴一下通过antd的Modal实现对话框显示大图片的过程：

导入Modal：

组件初始化，设isShow控制对话框的显示，imgSrc存放对话框总图片地址：

将Modal的JSX放到render的return里面：

调用到的方法写在render的外面（因为footer被我设置成null了，所以onOk和onCancel没有用到，用到的话这样写就行了）：

最后看一下点击图片弹出对话框的效果是啥样：

放大的效果

坑填完啦，继续改Bug呀。坐等过年（八卦一下大家过年放假几天？）