React tsx はランダムな検証コードを生成します

React tsxは参照用にランダムな検証コードを生成します。具体的な内容は次のとおりです。

最近、tsx を使用して React を開発しました。検証コードをランダムに生成する良いプラグインが見つからなかったので、自分で作成しました。さっそく、コードを紹介します。

tsx ファイルは次のとおりです。

React コードスニペット。

"react" から * を React としてインポートします。

定数サイズ = 4;
const 検証コード = {
    幅: "32%",
    高さ: "32px",
    marginLeft: "5%",
    表示:"インラインブロック",
    position:"absolute" を "absolute" として、
    上:"0",
    右:"0",
}
デフォルトのクラス InputVerify をエクスポートし、React.Component<any, any> を拡張します。
    コンストラクタ(props) {
        スーパー(小道具);
        この状態 = {
            オプション:
                id: "verifycode", //コンテナID
                canvasId: "verifyCanvas", //キャンバスID
                width: "150", // デフォルトのキャンバス幅 height: "47", // デフォルトのキャンバス高さ type: "blend", // グラフィック検証コードのデフォルトのタイプ blend: 数字と文字の混合タイプ、number: 純粋な数字、letter: 純粋な文字 code: "",
                numArr: "0,1,2,3,4,5,6,7,8,9".split(","),
                文字配列: this.getAllLetter(),
            }
        }

    }

    コンポーネントマウント() {
        const self = this;
        タイムアウトを設定する(() => {
            自己._init();
            自己リフレッシュ();
        }, 100)
        this.props.onRef(this); // 親コンポーネントから渡された関数を呼び出し、それを親コンポーネントに割り当てます}

    _init() {
        con = document.getElementById(this.state.options.id); とします。
        キャンバスを document.createElement("キャンバス") にします。
        this.state.options.width = con.offsetWidth > 0 ? con.offsetWidth : "150";
        this.state.options.height = con.offsetHeight > 0 ? con.offsetHeight : "47";
        キャンバスID = this.state.options.canvasId;
        キャンバスの幅 = this.state.options.width;
        キャンバスの高さ = this.state.options.height;
        canvas.style.cursor = "ポインター";
        canvas.innerHTML = "お使いのブラウザのバージョンはキャンバスをサポートしていません";
        キャンバスに子要素を追加します。
        親を this とします。
        キャンバス.onclick = 関数（）{
            親.refresh();
        }
    }

    リフレッシュ() {
        this.state.options.code = "";
        キャンバス: any = document.getElementById(this.state.options.canvasId);
        ctx = null とします。
        キャンバスのコンテキストを取得する場合
            ctx = キャンバス.getContext('2d');
        } それ以外 {
            戻る;
        }
        ctx.clearRect(0, 0, this.state.options.width, this.state.options.height);
        ctx.textBaseline = "中央";

        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);
        } それ以外の場合 (this.state.options.type == "number") {
            var txtArr = this.state.options.numArr;
        } それ以外 {
            var txtArr = this.state.options.letterArr;
        }

        (var i = 1; i <= サイズ; 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 / (サイズ + 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);
        }
        /**干渉線を描く**/
        (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();
        }
    }

    検証(コード) {
        var code = code.toLowerCase();
        var v_code = this.state.options.code.toLowerCase();
        コード == v_code の場合 {
            true を返します。
        } それ以外 {
            これを更新します。
            false を返します。
        }
    }
    /**文字配列を生成する**/
    すべての文字を取得する() {
        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";
        letterStr.split(","); を返します。
    }
    /**乱数を生成する**/
    ランダム数(最小, 最大) {
        Math.floor(Math.random() * (max - min) + min) を返します。
    }
    /**ランダムな色を生成する**/
    ランダムカラー(最小, 最大) {
        var r = this.randomNum(最小値, 最大値);
        var g = this.randomNum(最小値, 最大値);
        var b = this.randomNum(最小値, 最大値);
        "rgb(" + r + "," + g + "," + b + ")" を返します。
    }

    与える（） {
        戻る （
            <div id="検証コード" style={検証コード}></div>
        ）
    }
}

ここで、verifycode のスタイルは自分で変更します。通常はコードスニペットです。

「../InputVerify」からInputVerifyをインポートします。

この方法では、検証コードが自動的に生成されます。どうやって検証するのでしょうか? 簡単にここに投稿します。ここのフォームは antd を使用しており、一目でわかります。

コードスニペット。

エクスポート デフォルト ($Child: any = {}) => {
 //フォーム送信メソッド const onFinish = (値: 任意) => {
        if (values.vcode) {
            console.log($Child.validate(values.vcode))//子コンポーネントメソッド検証を呼び出す}
    };
    
 const onFinishFailed = (errorInfo: 任意) => {
        console.log('失敗:', errorInfo);
    };
 
 戻る （
  <フォーム
            {...レイアウト}
            名前="基本"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
         <Form.Item name="vcode" rules={[{ required: true, message: '認証コードを入力してください' }]}>
               <Input size="large" className="security-code" placeholder="確認コードを入力してください" />
            </フォーム.アイテム>
   ここで、親コンポーネントは onRef* を通じて子コンポーネントのメソッドを呼び出します。
   <InputVerify onRef={(ref) => { $Child = ref }}></InputVerify>
  </フォーム>
 ）
}

上記の書き方は、確かにReactの古い書き方です。React 16.8以降はすべてフックを使用するので、これも変更します。コードは次のとおりです。

コードスニペット。

"react" から * を React としてインポートします。

定数サイズ = 4;
const 検証コード = {
    幅: "32%",
    高さ: "32px",
    marginLeft: "5%",
    表示:"インラインブロック",
    position:"absolute" を "absolute" として、
    上:"0",
    右:"0",
}

エクスポートデフォルト（{cRef}）=> {
    const [コード、setCode] = React.useState(Boolean);
    const [オプション、setOptions] = React.useState({
                id: "verifycode", //コンテナID
                canvasId: "verifyCanvas", //キャンバスID
                width: 150, // デフォルトのキャンバス幅 height: 47, // デフォルトのキャンバス高さ type: "blend", // グラフィック検証コードのデフォルトのタイプ blend: 数字と文字の混合タイプ、 number: 純粋な数字、 letter: 純粋な文字 code: "",
                numArr: "0,1,2,3,4,5,6,7,8,9".split(","),
                文字Arr: getAllLetter(),});

    React.useImperativeHandle(cRef,()=>({
        検証: (vcode) => {
            var vcode = vcode.toLowerCase();
            var v_code = options.code.toLowerCase();
            (vcode == v_code)の場合{
                コードを設定します(true);
            } それ以外 {
                リフレッシュ();
                コードを設定します(false);
            }
            戻りコード;
        }
    }));

    React.useEffect(()=>{
        _init();
        リフレッシュ();
    })

    関数_init() {
        con = document.getElementById(options.id); とします。
        キャンバス: any = document.createElement("キャンバス");
        options.width = con.offsetWidth > 0 ? con.offsetWidth : 150;
        options.height = con.offsetHeight > 0 ? con.offsetHeight : 47;
        キャンバスID = オプション.canvasId;
        キャンバスの幅 = オプションの幅;
        キャンバスの高さ = オプションの高さ;
        canvas.style.cursor = "ポインター";
        canvas.innerHTML = "お使いのブラウザのバージョンはキャンバスをサポートしていません";
        キャンバスに子要素を追加します。
        キャンバス.onclick = 関数（）{
            リフレッシュ();
        }
    }

    関数リフレッシュ() {
        オプション.code = "";
        キャンバス: any = document.getElementById(options.canvasId);
        ctx = null とします。
        キャンバスのコンテキストを取得する場合
            ctx = キャンバス.getContext('2d');
        } それ以外 {
            戻る;
        }
        ctx.clearRect(0, 0, オプションの幅、オプションの高さ);
        ctx.textBaseline = "中央";

        ctx.fillStyle = ランダムカラー(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);
        } それ以外の場合 (options.type == "number") {
            var txtArr = オプション.numArr;
        } それ以外 {
            var txtArr = options.letterArr;
        }

        (var i = 1; i <= サイズ; i++) {
            var txt = txtArr[randomNum(0, txtArr.length)];
            オプション.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 = ランダム数値(-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);
        }
        /**干渉線を描く**/
        (var i = 0; i < 4; i++) の場合 {
            ctx.strokeStyle = ランダムカラー(40, 180);
            ctx.beginPath();
            ctx.moveTo(ランダム数値(0, オプションの幅), ランダム数値(0, オプションの高さ));
            ctx.lineTo(ランダム数値(0, オプションの幅), ランダム数値(0, オプションの高さ));
            ctx.stroke();
        }
    }

        /**文字配列を生成する**/
    関数 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";
        letterStr.split(","); を返します。
    }
    /**乱数を生成する**/
    関数 randomNum(最小: 任意、最大: 任意) {
        Math.floor(Math.random() * (max - min) + min) を返します。
    }
    /**ランダムな色を生成する**/
    関数 randomColor(最小値, 最大値) {
        var r = randomNum(最小値, 最大値);
        var g = randomNum(最小値, 最大値);
        var b = randomNum(最小値, 最大値);
        "rgb(" + r + "," + g + "," + b + ")" を返します。
    }

    戻る （
        <div id="検証コード" style={検証コード}></div>
    ）
}

呼び出しも簡単です。親コンポーネントは React.useRef を宣言し、それを子コンポーネントに渡します。

React の子 Ref を定数で指定します。
//ここでコードはantDのFormフォームのonFinishイベントを通じて取得されます //子コンポーネントメソッドchildRef.current.validate(code)を呼び出します

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

さて、効果は次のようになります。