这篇文章给大家介绍了“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<any, any> {
    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 (
            <div id="verifycode" style={verifycode}></div>
        )
    }
}

这里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 (
  <Form
            {...layout}
            name="basic"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
         <Form.Item name="vcode" rules={[{ required: true, message: '请输入验证码' }]}>
               <Input size="large" className="security-code" placeholder="请输入验证码" />
            </Form.Item>
   {/* 这里通过onRef来父组件调用子组件的方法 */}
   <InputVerify onRef={(ref) => { $Child = ref }}></InputVerify>
  </Form>
 )
}

上面这种写法呢确实是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 (
        <div id="verifycode" style={verifycode}></div>
    )
}

调用也简单，父组件声明一个React.useRef，传给子组件

const childRef = React.useRef<any>();
//这里code通过antD的Form表单的onFinish事件获得
//调用子组件方法
childRef.current.validate(code)

<InputVerify cRef={childRef}></InputVerify>

好了，效果如下图：

以上就是关于“React用tsx怎么写一个生成验证码的功能”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 在JS中修改h2标题内容的方法是什么

  方法：1、用“document.getElementById("id值")”语句根据id值获取h2元素对象；2、使用“h2元素对象.innerHTML="新标题内容"”或“h2元素对象.innerText="新标题内容"”语句进行修改即可。

• 使用原生JS怎样实现弹幕效果？代码是什么？

  对于弹幕相信经常看剧的朋友应该都比较了解，很多朋友喜欢开着弹幕看剧，那么我们想要自己实现弹幕效果，要怎样做呢？下面小编就给大家分享使用原生JS怎样实现弹幕效果的实例，感兴趣的朋友可以参考。

• JavaScript语句写在哪里，有哪些要注意？

  有一些刚接触JavaScript的新手对于JavaScript语句写在哪里会有点困惑，对此这篇我们就简单的了解一下JavaScript语句的写法。我们要知道JavaScript语句是必须嵌套在“script”标签中，接下来我们来看看要注意哪些及怎样写。

• node.js怎样实现断点续传？一文看懂步骤过程

  node.js怎样实现断点续传？首先，断点续传怎样理解呢？一般，如果是一些只有几M的图片或者文件，我们将它们上传的到服务器是上是很快的，但是如果是几百M或者几G的文件，那么上传到服务器的时间就会更久，如果这期间文件有断网或者网络差要重新下载情况，那么得多人抓狂呀！而使用切片+断点续传就能够很好应对这样的情况。那么具体怎样做呢？下面跟随小编一起来详细了解看看吧。

• Nod.Js部署配置pm2的过程是什么，pm2有哪些特征

  高大上先上部署node方式：直接通过nodeapp来启动，如果报错了可能直接停在整个运行，supervisor感觉只是拿来用作开发环境的。目前似乎最常见的线上部署nodejs项目的有forever,pm2这两种。使用场合： supervisor是开发环境用。forever管理多个站点，每个站点访问量不大，不需要监控。pm2网站访问量比较大,需要完整的监控界面 pm2主要