React tsx generiert einen zufälligen Bestätigungscode

importiere * als React von „react“;

Konstantengröße = 4;
const Verifizierungscode = {
    Breite: "32%",
    Höhe: "32px",
    marginLeft: "5%",
    Anzeige: „Inline-Block“,
    position:"absolut" als "absolut",
    oben: "0",
    rechts:"0",
}
exportiere Standardklasse InputVerify erweitert React.Component<any, any> {
    Konstruktor(Requisiten) {
        super(Requisiten);
        dieser.Zustand = {
            Optionen:
                id: "verifycode", //Container-ID
                canvasId: "verifyCanvas", //Canvas-ID
                width: "150", //Standard-Leinwandbreite height: "47", //Standard-Leinwandhöhe type: "blend", //Standardtyp des Grafiküberprüfungscodes blend: gemischter Typ aus Zahlen und Buchstaben, number: reine Zahlen, letter: reine Buchstaben code: "",
                AnzahlAnzahl: "0,1,2,3,4,5,6,7,8,9".split(","),
                letterArr: this.getAllLetter(),
            }
        }

    }

    componentDidMount() {
        const selbst = dies;
        setzeTimeout(() => {
            self._init();
            selbst aktualisieren();
        }, 100)
        this.props.onRef(this); // Ruft die von der übergeordneten Komponente übergebene Funktion auf und weist sich selbst der übergeordneten Komponente zu}

    _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 = dieser.Zustand.Optionen.CanvasId;
        canvas.width = dieser.Zustand.Optionen.Breite;
        canvas.height = dieser.Zustand.Optionen.Höhe;
        canvas.style.cursor = "Zeiger";
        canvas.innerHTML = „Ihre Browserversion unterstützt Canvas nicht“;
        con.appendChild(Leinwand);
        lass Elternteil = dies;
        canvas.onclick = Funktion () {
            übergeordnetes Element.Aktualisieren();
        }
    }

    aktualisieren() {
        dieser.Status.Optionscode = "";
        let canvas: beliebig = document.getElementById(this.state.options.canvasId);
        lass ctx = null;
        wenn (canvas.getContext) {
            ctx = canvas.getContext('2d');
        } anders {
            zurückkehren;
        }
        ctx.clearRect(0, 0, dieser.Zustand.Optionen.Breite, dieser.Zustand.Optionen.Höhe);
        ctx.textBaseline = "Mitte";

        ctx.fillStyle = diese.randomColor(180, 240);
        ctx.fillStyle = "rgba(0,0,0,0)"; //Hintergrundfarbe ctx.fillRect(0, 0, this.state.options.width, this.state.options.height);

        if (this.state.options.type == "blend") { //Beurteilen Sie den Typ des Bestätigungscodes var txtArr = this.state.options.numArr.concat(this.state.options.letterArr);
        } sonst wenn (dieser.Zustand.Optionen.Typ == "Zahl") {
            var txtArr = dieser.Zustand.Optionen.AnzahlArr;
        } anders {
            var txtArr = dieser.Zustand.Optionen.letterArr;
        }

        für (var i = 1; i <= Größe; i++) {
            var txt = txtArr[this.randomNum(0, txtArr.length)];
            dieser.Zustand.Optionen.Code += txt;
            ctx.font = this.randomNum(this.state.options.height / 2, this.state.options.height) + 'px SimHei'; //Schriftgröße zufällig generieren ctx.fillStyle = this.randomColor(50, 160); //Schriftfarbe zufällig generieren// ctx.fillStyle = "rgb(46, 137, 255)";//Feste Schriftfarbe 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 = dieser.Zustand.Optionen.Breite / (Größe + 1) * i;
            var y = dieser.Zustand.Optionen.Höhe / 2;
            var deg = diese.randomNum(-30, 30);
            /**Drehwinkel und Koordinatenursprung festlegen**/
            ctx.translate(x, y);
            ctx.rotate(Grad * Math.PI / 180);
            ctx.fillText(txt, 0, 0);
            /**Drehwinkel und Koordinatenursprung wiederherstellen**/
            ctx.rotate(-grad * Math.PI / 180);
            ctx.translate(-x, -y);
        }
        /**Interferenzlinie zeichnen**/
        für (var i = 0; i < 4; i++) {
            ctx.strokeStyle = this.randomColor(40, 180);
            ctx.beginPath();
            ctx.moveTo(diese.randomNum(0, dieser.Zustand.Optionen.Breite), diese.randomNum(0, dieser.Zustand.Optionen.Höhe));
            ctx.lineTo(diese.randomNum(0, dieser.Zustand.Optionen.Breite), diese.randomNum(0, dieser.Zustand.Optionen.Höhe));
            ctx.stroke();
        }
    }

    validieren(Code) {
        var code = code.toLowerCase();
        var v_code = this.state.options.code.toLowerCase();
        wenn (Code == v_Code) {
            gibt true zurück;
        } anders {
            dies.aktualisieren();
            gibt false zurück;
        }
    }
    /**Buchstaben-Array generieren**/
    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(",");
    }
    /**Eine Zufallszahl generieren**/
    Zufallszahl(min, max) {
        gibt Math.floor(Math.random() * (max - min) + min) zurück;
    }
    /**Erzeuge eine zufällige Farbe**/
    zufälligeFarbe(min, max) {
        var r = diese.randomNum(min, max);
        var g = diese.randomNum(min, max);
        var b = diese.randomNum(min, max);
        gibt "rgb(" + r + "," + g + "," + b + ")" zurück;
    }

    rendern() {
        zurückkehren (
            <div id="Verifycode" style={Verifycode}></div>
        )
    }
}

importiere InputVerify aus "../InputVerify"

Standard exportieren ($Child: beliebig = {}) => {
 //Methode zum Absenden des Formulars const onFinish = (Werte: beliebig) => {
        wenn (Werte.vcode) {
            console.log($Child.validate(values.vcode))//Methodenvalidierung der untergeordneten Komponente aufrufen}
    };
    
 const onFinishFailed = (Fehlerinfo: beliebig) => {
        console.log('Fehlgeschlagen:', errorInfo);
    };
 
 zurückkehren (
  <Formular
            {...Layout}
            Name="Grundlegend"
            beimFertigstellen={beimFertigstellen}
            onFinishFailed={onFinishFailed}
        >
         <Form.Item name="vcode" rules={[{ required: true, message: ,Bitte geben Sie den Bestätigungscode ein' }]}>
               <Input size="large" className="security-code" placeholder="Bitte geben Sie den Bestätigungscode ein" />
            </Form.Item>
   {/* Hier ruft die übergeordnete Komponente die Methode der untergeordneten Komponente über onRef auf*/}
   <InputVerify onRef={(ref) => { $Child = ref }}></InputVerify>
  </Form>
 )
}

importiere * als React von „react“;

Konstantengröße = 4;
const Verifizierungscode = {
    Breite: "32%",
    Höhe: "32px",
    marginLeft: "5%",
    Anzeige: „Inline-Block“,
    position:"absolut" als "absolut",
    oben: "0",
    rechts:"0",
}

Standard exportieren ({cRef}) => {
    const [code, setCode] = React.useState(Boolean);
    const [Optionen, Optionen festlegen] = React.useState({
                id: "verifycode", //Container-ID
                canvasId: "verifyCanvas", //Canvas-ID
                width: 150, //Standard-Leinwandbreite height: 47, //Standard-Leinwandhöhe type: "blend", //Standardtyp des Grafiküberprüfungscodes blend: gemischter Typ aus Zahlen und Buchstaben, number: reine Zahlen, letter: reine Buchstaben code: "",
                AnzahlAnzahl: "0,1,2,3,4,5,6,7,8,9".split(","),
                letterArr: getAllLetter(),});

    React.useImperativeHandle(cRef,()=>({
        validieren: (vcode) => {
            var vcode = vcode.toLowerCase();
            var v_code = options.code.toLowerCase();
            wenn (vcode == v_code) {
                setzeCode(true);
            } anders {
                aktualisieren();
                setzeCode(false);
            }
            Rückgabecode;
        }
    }));

    Reagieren.useEffect(()=>{
        _init();
        aktualisieren();
    })

    Funktion _init() {
        let con = document.getElementById(options.id);
        let canvas: beliebig = document.createElement("canvas");
        Optionen.Breite = con.OffsetWidth > 0? con.OffsetWidth: 150;
        Optionen.Höhe = con.OffsetHeight > 0? con.OffsetHeight: 47;
        canvas.id = Optionen.canvasId;
        canvas.width = Optionen.Breite;
        Canvas.Höhe = Optionen.Höhe;
        canvas.style.cursor = "Zeiger";
        canvas.innerHTML = „Ihre Browserversion unterstützt Canvas nicht“;
        con.appendChild(Leinwand);
        canvas.onclick = Funktion () {
            aktualisieren();
        }
    }

    Funktion aktualisieren() {
        Optionen.code = "";
        let canvas: beliebig = document.getElementById(options.canvasId);
        lass ctx = null;
        wenn (canvas.getContext) {
            ctx = canvas.getContext('2d');
        } anders {
            zurückkehren;
        }
        ctx.clearRect(0, 0, Optionen.Breite, Optionen.Höhe);
        ctx.textBaseline = "Mitte";

        ctx.fillStyle = zufälligeFarbe(180, 240);
        ctx.fillStyle = "rgba(0,0,0,0)"; //Hintergrundfarbe ctx.fillRect(0, 0, options.width, options.height);

        if (options.type == "blend") { //Den Typ des Bestätigungscodes beurteilen var txtArr = options.numArr.concat(options.letterArr);
        } sonst wenn (Optionen.Typ == "Zahl") {
            var txtArr = Optionen.numArr;
        } anders {
            var txtArr = Optionen.letterArr;
        }

        für (var i = 1; i <= Größe; i++) {
            var txt = txtArr[randomNum(0, txtArr.Länge)];
            Optionen.code += txt;
            ctx.font = randomNum(options.height / 2, options.height) + 'px SimHei'; //Schriftgröße zufällig generieren ctx.fillStyle = randomColor(50, 160); //Schriftfarbe zufällig generieren// ctx.fillStyle = "rgb(46, 137, 255)";//Feste Schriftfarbe ctx.shadowOffsetX = randomNum(-3, 3);
            ctx.shadowOffsetY = Zufallszahl(-3, 3);
            ctx.shadowBlur = Zufallszahl(-3, 3);
            ctx.shadowColor = "rgba(0, 0, 0, 0,3)";
            var x = Optionen.Breite / (Größe + 1) * i;
            var y = Optionen.Höhe / 2;
            var deg = Zufallszahl(-30, 30);
            /**Drehwinkel und Koordinatenursprung festlegen**/
            ctx.translate(x, y);
            ctx.rotate(Grad * Math.PI / 180);
            ctx.fillText(txt, 0, 0);
            /**Drehwinkel und Koordinatenursprung wiederherstellen**/
            ctx.rotate(-grad * Math.PI / 180);
            ctx.translate(-x, -y);
        }
        /**Interferenzlinie zeichnen**/
        für (var i = 0; i < 4; i++) {
            ctx.strokeStyle = zufälligeFarbe(40, 180);
            ctx.beginPath();
            ctx.moveTo(Zufallszahl(0, Optionen.Breite), Zufallszahl(0, Optionen.Höhe));
            ctx.lineTo(Zufallszahl(0, Optionen.Breite), Zufallszahl(0, Optionen.Höhe));
            ctx.stroke();
        }
    }

        /**Buchstaben-Array generieren**/
    Funktion 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(",");
    }
    /**Eine Zufallszahl generieren**/
    Funktion Zufallszahl(min: beliebig, max: beliebig) {
        gibt Math.floor(Math.random() * (max - min) + min) zurück;
    }
    /**Erzeuge eine zufällige Farbe**/
    Funktion Zufallsfarbe(min, max) {
        var r = Zufallszahl(min, max);
        var g = Zufallszahl(min, max);
        var b = Zufallszahl(min, max);
        gibt "rgb(" + r + "," + g + "," + b + ")" zurück;
    }

    zurückkehren (
        <div id="Verifycode" style={Verifycode}></div>
    )
}

const childRef = React.useRef<any>();
//Hier wird der Code durch das onFinish-Ereignis des Formulars von antD erhalten. //Rufen Sie die Methode der untergeordneten Komponente childRef.current.validate(code) auf.

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