一页上有react-recaptcha-v3的两种形式

问题描述

我的页面上有两个与formspree相关的表单是在gatsby中构建的并做出反应。我对这两种形式都使用react-recaptcha-v3，但是它仅适用于第一个形式（this.state.isverified在第二个形式中总是错误的）。是否可以在一个页面上的多个表单上使用recaptcha v3，或者我的代码有问题？这是我的代码的相关部分。

具有第一种形式的组件（有效）：

    componentDidMount() {
        loadReCaptcha("my-sitekey");
    }    

recaptchaLoaded() {
        console.log("Recaptcha loaded");
    }

    verifyCallback(res) {
        if(res) {
            this.setState({
                isverified: true
            });
        }
    }

handleSubmit(e) {
            e.preventDefault();
          
            if((this.state.isverified)&&(this.state.formError === "")) {
                const form = e.target;
                const data = {
                    imie: this.state.name,nazwisko: this.state.surname,telefon: this.state.phoneNumber,email: this.state.email,wiadomosc: this.state.msg
                };
                const xhr = new XMLHttpRequest();
                xhr.open(form.method,form.action);
                xhr.setRequestHeader("Accept","application/json");
                xhr.onreadystatechange = () => {
                    if (xhr.readyState !== XMLHttpRequest.DONE) return;
                    if (xhr.status === 200) {
                        form.reset();
                        this.setState({ status: "SUCCESS" });
                    } else {
                        this.setState({ status: "ERROR" });
                    }
                };
                xhr.send(JSON.stringify(data));
            }
            this.resetState();
        }
    
        render() {
            return (<section className="kontakt">
                <form method="POST" onSubmit={e => this.handleSubmit(e)} action="my-formspree-link">
                    (inputs)
    
                    <div className="recaptcha">
                        <ReCaptcha
                            sitekey="my-sitekey"
                            render="implicit"
                            verifyCallback={this.verifyCallback}
                            onloadCallback={this.recaptchaLoaded}
                        />
                    </div>
    
                    { this.state.formError === "" ? "" : <div className="error">{this.state.formError}</div> }
    
                    <button type="submit">
                        Wyślij
                    </button>
    
                    <div className="google">
                        <p>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</p>
                    </div>
                </form>
            </section>);
        }

具有第二种形式的组件（无效）：

 componentDidMount() {
        loadReCaptcha("my-sitekey");
    }

    verifyCallback(res) {
        if(res) {
            this.setState({
                isverified: true
            });
        }
    }

    recaptchaLoaded() {
        console.log("Recaptcha loaded");
    }

handleSubmit(e) {
        e.preventDefault();

        if((this.state.isverified)&&(this.state.emailError === "")&&(this.state.email !== "")) {
            const form = e.target;
            console.log(form.method);
            const data = {
                email: this.state.email
            };
            const xhr = new XMLHttpRequest();
            xhr.open(form.method,form.action);
            xhr.setRequestHeader("Accept","application/json");
            xhr.onreadystatechange = () => {
                if (xhr.readyState !== XMLHttpRequest.DONE) return;
                if (xhr.status === 200) {
                    form.reset();
                    this.setState({ status: "SUCCESS" });
                } else {
                    this.setState({ status: "ERROR" });
                }
            };
            xhr.send(JSON.stringify(data));
            this.resetState();
        }
    }

    render() {
        return (<footer>
            <div className="right">
                <form method="POST" action="formspree-link" onSubmit={e => this.handleSubmit(e)}>
                    <input type="email" name="email" placeholder="Twój email" onChange={e => this.handleChange(e)} value={this.state.email} />

                    <div className="recaptcha">
                        <ReCaptcha
                            siteKey="my-sitekey"
                            render="implicit"
                            verifyCallback={this.verifyCallback}
                            onloadCallback={this.recaptchaLoaded}
                        />
                    </div>

                    <button type="submit">Potwierdź</button>

                    <div className="error">
                        {this.state.emailError}
                    </div>

                    <div className="google">
                        <p>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</p>
                    </div>
                </form>
            </div>
        </footer>)
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）