最近兩周一直在忙忌锯，忙H5頁面辫愉，忙項(xiàng)目更替，以至于上上周一測試提的Bug到現(xiàn)在才算解決完族铆。
這是同事在很早以前寫的一段程序岩四，在系統(tǒng)的 個人中心 里有 我的動態(tài) 這么一個模塊，里面顯示的內(nèi)容是文字+圖片哥攘。不得不吐槽一下剖煌，首頁有個差不多的模塊，為啥首頁能正常顯示而個人中心卻要弄個這么大個圖逝淹。
話不多說耕姊，直接來到代碼部分。先把樣式調(diào)整成合適的比例栅葡，找到對應(yīng)的樣式文件茉兰，修改寬高和左間距。
下面我們看一下圖片是通過什么方式寫到頁面里面去的欣簇。
本人比較耿直规脸，一開始想到的最直接暴力的方法就是在`<img />`里面加onClick唄，但不知道是我一開始就錯了還是猜的全沒碰對熊咽，以至于到最后我放棄了在img元素里加方法來獲取每張圖片的src莫鸭。大家都知道在反單引號里面可以通過${}來拿到值放到字符串里做拼接，但是要引用方法還真是挺為難的（不能普通的字符串拼接和兩對反單引號做拼接的情況下）横殴。既然不能把onClick放到img上被因，那就放它的父元素上吧（最后不知道怎么想出來的一個辦法）。
敲黑板梨与，第二個 if 是重點(diǎn)。因?yàn)槲覀兊膐nClick是放在<img>所在的父元素<div>上的文狱，所以用戶點(diǎn)擊父元素的任何一個角落都會觸發(fā)同一個事件粥鞋。于是要加以區(qū)分，只有讓用戶點(diǎn)在<div>的<img>上方法才去作用如贷，否則啥事都不發(fā)生陷虎。具體可以在方法里先console.log(e.target.nodeName)看看，如果點(diǎn)在圖片外的部分返回的是“DIV”杠袱，而點(diǎn)在圖片上返回的則是“IMG”，這就是我們要找的區(qū)別窝稿。
以上就是我在這個Bug中遇到的坑楣富，總結(jié)下來就是：不要試圖直接在反單引號上加事件，可以加到父元素上去伴榔。下面貼一下通過antd的Modal實(shí)現(xiàn)對話框顯示大圖片的過程：
導(dǎo)入Modal：
組件初始化纹蝴，設(shè)isShow控制對話框的顯示庄萎，imgSrc存放對話框總圖片地址：
將Modal的JSX放到render的return里面：
調(diào)用到的方法寫在render的外面（因?yàn)閒ooter被我設(shè)置成null了，所以onOk和onCancel沒有用到塘安，用到的話這樣寫就行了）：
最后看一下點(diǎn)擊圖片彈出對話框的效果是啥樣：
坑填完啦糠涛，繼續(xù)改Bug呀。坐等過年（八卦一下大家過年放假幾天兼犯？）
