怎么新建MySQL数据库

这篇文章主要介绍“如何用React tsx编写随机验证码，代码是什么”，有一些人在如何用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编写随机验证码，代码是什么”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。