为什么要图形验证码？
注册网站账户时或完成某些线上操作时，经常需要由图形验证码进行验证，防止机器人的恶意注册或者暴力操作。
图形验证码的功能？
图形验证码需要实现：点击图片后刷新验证图片的功能，让我们在react里写一段代码试一下。
1、先写js要操纵的dom代码
render(){
return(
,form>
<ul>
<li className="form_group">
<div className="label"><label htmlFor="authCode">验证码</label></div>
<div className="filed"><input className="lg_input z_ipt" id="authCode" type="text" tabIndex="3" maxLength="4" name="authCode" placeholder="请输入验证码" data_ajaxurl="/Index/Index/checkAuthCode" hidefocus="hidefocus"/></div>
{/*验证码*/}
<div className="reg_code_box">
<img className="VerifyCodeImg" id="showImg" data-src='https://www.tourongjia.com/Index/Index/verify?version=5a72831543019' src="https://www.tourongjia.com/Index/Index/verify?version=5a72831543019" width="125px" height="42px" onClick={this.img}/>
</div>
</li>
</ul>
</form>
)
}
未添加css效果
说明：（1）.在HTML标签中，可以自定义标签属性“data-X”，自定义属性仅仅是存放数据的地方，不对对页面有任何的影响。可以用js的
element.getAttribute("data-*")方法取到该自定义属性值，可以用element.setAttribute("key","value")方法，设置标签属性并赋值。
（2）要有可以刷新就更换图片的src地址
2、写要实现点击图片后刷新图片功能的js代码
img(){
let showImg = document.getElementById("showImg");
let imgSrc = document.getElementsByClassName('VerifyCodeImg')[0].getAttribute("data-src");
showImg.setAttribute("src",imgSrc);
console.log(typeof (showImg),showImg)
}
在img函数里面，先以
getElementById的方式定位到初始图片，然后以getElementsByClassName的方式得到刷新出来的图片地址，然后调用setAttribute函数，以key，value的形式，将"src",imgSrc(src属性和图片地址)传入<img>中，并覆盖掉原来的图片
console.log打出来的查看document.getElementsByClassName('VerifyCodeImg')的值，发现是数组，所以此时要以序号取值的方式取出值!
刷新二维码.gif
