点击图片验证码更换验证码图片

做登录注册等功能的时候一般都有图片验证码功能,点击看不清,换一张的时候更换一张验证码,但是又不想整个页面跟着刷新,只刷新一个验证码,因为我的项目是react项目,所以就直接上react的代码了,原理就是通过改变接口地址,然后获取新的图片验证码

首先我们拿到后台接口

//
state={
    imgCode:'http://192.168.1.111:18886/ucenter/sso/generateImgCode.html'  //先设置后台的接口地址
  }

然后页面上有一个img标签

<img src={this.state.imgCode} className={styles.getYzm} onClick={(e)=>{this.getYzm(e)}} />

点击的时候换图片

getYzm=(e)=>{
    e.preventDefault();
    let imgCodePath = this.state.imgCode.split('?')[0] +'?id='+parseInt(Math.random()*100000);
    this.setState({
      imgCode:imgCodePath
    })
  }