这篇文章主要为大家详细介绍了React tsx生成随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React tsx 生成随机验证码，供大家参考，具体内容如下
最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插件，自己就手撸了一个，废话不多话，直接上代码。
tsx文件如下：
React代码片.
import * as React from "react"; const size = 4; const verifycode = { width: "32%", height: "32px", marginLeft: "5%", display:"inline-block", position:"absolute" as "absolute", top:"0", right:"0", } export default class InputVerify extends React.Component { constructor(props) { super(props); this.state = { options: { id: "verifycode", //容器Id canvasId: "verifyCanvas", //canvas的ID width: "150", //默认canvas宽度 height: "47", //默认canvas高度 type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母 code: "", numArr: "0,1,2,3,4,5,6,7,8,9".split(","), letterArr: this.getAllLetter(), } } } componentDidMount() { const self = this; setTimeout(() => { self._init(); self.refresh(); }, 100) this.props.onRef(this);// 调用父组件传入的函数，把自身赋给父组件 } _init() { let con = document.getElementById(this.state.options.id); let canvas = document.createElement("canvas"); this.state.options.width = con.offsetWidth > 0 ? con.offsetWidth : "150"; this.state.options.height = con.offsetHeight > 0 ? con.offsetHeight : "47"; canvas.id = this.state.options.canvasId; canvas.width = this.state.options.width; canvas.height = this.state.options.height; canvas.style.cursor = "pointer"; canvas.innerHTML = "您的浏览器版本不支持canvas"; con.appendChild(canvas); let parent = this; canvas.onclick = function () { parent.refresh(); } } refresh() { this.state.options.code = ""; let canvas : any = document.getElementById(this.state.options.canvasId); let ctx = null; if (canvas.getContext) { ctx = canvas.getContext('2d'); } else { return; } ctx.clearRect(0, 0, this.state.options.width, this.state.options.height); ctx.textBaseline = "middle"; ctx.fillStyle = this.randomColor(180, 240); ctx.fillStyle = "rgba(0,0,0,0)";//背景色 ctx.fillRect(0, 0, this.state.options.width, this.state.options.height); if (this.state.options.type == "blend") { //判断验证码类型 var txtArr = this.state.options.numArr.concat(this.state.options.letterArr); } else if (this.state.options.type == "number") { var txtArr = this.state.options.numArr; } else { var txtArr = this.state.options.letterArr; } for (var i = 1; i <= size; i++) { var txt = txtArr[this.randomNum(0, txtArr.length)]; this.state.options.code += txt; ctx.font = this.randomNum(this.state.options.height / 2, this.state.options.height) + 'px SimHei'; //随机生成字体大小 ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色 // ctx.fillStyle = "rgb(46, 137, 255)";//固定字体颜色 ctx.shadowOffsetX = this.randomNum(-3, 3); ctx.shadowOffsetY = this.randomNum(-3, 3); ctx.shadowBlur = this.randomNum(-3, 3); ctx.shadowColor = "rgba(0, 0, 0, 0.3)"; var x = this.state.options.width / (size + 1) * i; var y = this.state.options.height / 2; var deg = this.randomNum(-30, 30); /**设置旋转角度和坐标原点**/ ctx.translate(x, y); ctx.rotate(deg * Math.PI / 180); ctx.fillText(txt, 0, 0); /**恢复旋转角度和坐标原点**/ ctx.rotate(-deg * Math.PI / 180); ctx.translate(-x, -y); } /**绘制干扰线**/ for (var i = 0; i <4; i++) { ctx.strokeStyle = this.randomColor(40, 180); ctx.beginPath(); ctx.moveTo(this.randomNum(0, this.state.options.width), this.randomNum(0, this.state.options.height)); ctx.lineTo(this.randomNum(0, this.state.options.width), this.randomNum(0, this.state.options.height)); ctx.stroke(); } } validate(code) { var code = code.toLowerCase(); var v_code = this.state.options.code.toLowerCase(); if (code == v_code) { return true; } else { this.refresh(); return false; } } /**生成字母数组**/ getAllLetter() { var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"; return letterStr.split(","); } /**生成一个随机数**/ randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min); } /**生成一个随机色**/ randomColor(min, max) { var r = this.randomNum(min, max); var g = this.randomNum(min, max); var b = this.randomNum(min, max); return "rgb(" + r + "," + g + "," + b + ")"; } render() { return ( ) } }
这里verifycode的样式自己修改，一般代码片.
import InputVerify from "../InputVerify"
这样已经能自动生成验证码了，如何进行验证了，我这里也简单贴出来，这里Form用的antd，一看就懂
代码片.
export default ($Child: any = {}) => { //Form提交的方法 const onFinish = (values: any) => { if (values.vcode) { console.log($Child.validate(values.vcode))//调用子组件的方法验证 } }; const onFinishFailed = (errorInfo: any) => { console.log('Failed:', errorInfo); }; return ( {/* 这里通过onRef来父组件调用子组件的方法 */} { $Child = ref }}> ) }
上面这种写法呢确实是React老的写法，React16.8以后都用hook了，那我也改一下，代码如下：
代码片.
import * as React from "react"; const size = 4; const verifycode = { width: "32%", height: "32px", marginLeft: "5%", display:"inline-block", position:"absolute" as "absolute", top:"0", right:"0", } export default ({cRef}) => { const [code, setCode] = React.useState(Boolean); const [options,setOptions] = React.useState({ id: "verifycode", //容器Id canvasId: "verifyCanvas", //canvas的ID width: 150, //默认canvas宽度 height: 47, //默认canvas高度 type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母 code: "", numArr: "0,1,2,3,4,5,6,7,8,9".split(","), letterArr: getAllLetter(),}); React.useImperativeHandle(cRef,()=>({ validate : (vcode) => { var vcode = vcode.toLowerCase(); var v_code = options.code.toLowerCase(); if (vcode == v_code) { setCode(true); } else { refresh(); setCode(false); } return code; } })); React.useEffect(()=>{ _init(); refresh(); }) function _init() { let con = document.getElementById(options.id); let canvas : any = document.createElement("canvas"); options.width = con.offsetWidth > 0 ? con.offsetWidth : 150; options.height = con.offsetHeight > 0 ? con.offsetHeight : 47; canvas.id = options.canvasId; canvas.width = options.width; canvas.height = options.height; canvas.style.cursor = "pointer"; canvas.innerHTML = "您的浏览器版本不支持canvas"; con.appendChild(canvas); canvas.onclick = function () { refresh(); } } function refresh() { options.code = ""; let canvas : any = document.getElementById(options.canvasId); let ctx = null; if (canvas.getContext) { ctx = canvas.getContext('2d'); } else { return; } ctx.clearRect(0, 0, options.width, options.height); ctx.textBaseline = "middle"; ctx.fillStyle = randomColor(180, 240); ctx.fillStyle = "rgba(0,0,0,0)";//背景色 ctx.fillRect(0, 0, options.width, options.height); if (options.type == "blend") { //判断验证码类型 var txtArr = options.numArr.concat(options.letterArr); } else if (options.type == "number") { var txtArr = options.numArr; } else { var txtArr = options.letterArr; } for (var i = 1; i <= size; i++) { var txt = txtArr[randomNum(0, txtArr.length)]; options.code += txt; ctx.font = randomNum(options.height / 2, options.height) + 'px SimHei'; //随机生成字体大小 ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色 // ctx.fillStyle = "rgb(46, 137, 255)";//固定字体颜色 ctx.shadowOffsetX = randomNum(-3, 3); ctx.shadowOffsetY = randomNum(-3, 3); ctx.shadowBlur = randomNum(-3, 3); ctx.shadowColor = "rgba(0, 0, 0, 0.3)"; var x = options.width / (size + 1) * i; var y = options.height / 2; var deg = randomNum(-30, 30); /**设置旋转角度和坐标原点**/ ctx.translate(x, y); ctx.rotate(deg * Math.PI / 180); ctx.fillText(txt, 0, 0); /**恢复旋转角度和坐标原点**/ ctx.rotate(-deg * Math.PI / 180); ctx.translate(-x, -y); } /**绘制干扰线**/ for (var i = 0; i <4; i++) { ctx.strokeStyle = randomColor(40, 180); ctx.beginPath(); ctx.moveTo(randomNum(0, options.width), randomNum(0, options.height)); ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height)); ctx.stroke(); } } /**生成字母数组**/ function getAllLetter() { var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"; return letterStr.split(","); } /**生成一个随机数**/ function randomNum(min: any, max: any) { return Math.floor(Math.random() * (max - min) + min); } /**生成一个随机色**/ function randomColor(min, max) { var r = randomNum(min, max); var g = randomNum(min, max); var b = randomNum(min, max); return "rgb(" + r + "," + g + "," + b + ")"; } return ( ) }
调用也简单，父组件声明一个React.useRef，传给子组件
const childRef = React.useRef(); //这里code通过antD的Form表单的onFinish事件获得 //调用子组件方法 childRef.current.validate(code)
好了，效果如下图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是React tsx生成随机验证码的详细内容，更多请关注本站其它相关文章！
