在反应登录应用程序中验证 Google recaptcha

Question

我有一个反应应用程序，其中我在登录组件中使用了 google Recaptcha。 我不希望用户在没有选中“我不是机器人”Recaptcha 的情况下登录。 我正在使用一个状态，但我没有成功，因为状态永远不会改变，我该怎么办？ 我有下面的代码。

export default class Login extends Component {

constructor(props) {
    super(props);
    this.state = {
        captcha: false,
    }

}

callBack = () => {
    console.log("something inside re captcha");
}

verifyBack = (response) => {
    if (response) {
        this.setState({
            captcha: true,
        });
    }
}

onSubmit = () => {

    //  checking if captcha state is true to log in but not successful. 
    // log in only after checking the I'm not a robot box (assuming username/password matches).
}

render() {
    return (
        <div>
            <div class="container">
                <label for="uname"><b>Username</b></label>
                <input type="text" placeholder="Enter Username" name="uname" required />

                <label for="psw"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="psw" required />

                <button type="submit" onClick={this.onSubmit}>Login </button>
                <label>
                    <input type="checkbox" checked="checked" name="remember" /> Remember me
                </label>
            </div>
            <div class="container" style="background-color:#f1f1f1">
                <button type="button" class="cancelbtn">Cancel</button>
                <span class="psw">Forgot <a href="#">password?</a></span>
            </div>
            <div className="row invisible-recaptch">
                <ReCAPTCHA
                    sitekey="6Lf8zsgUAAAAAHV1_VcrNDHfWuYAXw1tUSLnexQg"
                    render="explicit"
                    onloadCallback={this.callBack}
                    verifyCallback={this.verifyBack}
                />
            </div>
        </div>
    );
}}

Answer 1

根据您的代码，我认为您需要在构造函数中绑定您的verifyBack函数。

constructor(props) {
    super(props);
     ...

   this.verifyBack = this.verifyBack.bind(this);
}

Answer 2

• 您的问题将解决。在 verifyBack 函数中，您无权访问此功能，因此 setState 无法正常工作。将功能与此绑定将帮助您做到这一点。