React-Redux:如何使ReCaptcha成为必填字段

在我的react-redux表单中,我想重新打包一个必填字段,并禁用我的导航栏组件,直到重新验证回复,我发现一些类似的问题与javaScript但我无法用React应用它们,因为我是使用react-recaptcha插件:

这是我的回调和verifyCallback方法:

  verifyCallback(response) {
     return response;
 }
 callback() {
console.log('Done !!');
}

谢谢

我添加了Hardik Modha建议的代码,如下所示,但仍有相同的问题:

 

 verifyCallback(response) {
this.setState({
  reCaptchaResponse: response,
});
 }

 validateForm() {
if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
  return false;
}
return true;
 }

Hardik Modha.. 5

var Recaptcha = require('react-recaptcha');

// specifying verify callback function
var verifyCallback = function (response) {
   this.setState({
        reCaptchaResponse: response
    });
};

ReactDOM.render(
  ,
  document.getElementById('example')
);

你可以通过道具verifyCallBack来react-recaptcha,在回调函数可以存储在状态或任何你想要的反应.现在,如果响应为空,您只需禁用下一个按钮,或者可以在用户单击验证时进行验证.

例如,如果要将响应存储在状态中,则可以检查reCaptcha响应是否为空.

validateForm() {

    // other field validations....

    if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
        return {success: false, message: 'Captcha is required.'};
    }
}

编辑:对于编辑过的问题,您还可以创建一个状态变量btnDisabled,并用true初始化它.

constructor() {
     super();
     this.state = {btnDisabled: true};
}

和Next按钮为

Next

现在,在您的validateForm方法中,您可以检查reCaptcha响应是否为空,并根据您可以将btnDisabled变量设置为true或false.

validateForm() {

    // other field validations....

    if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
        return {success: false, message: 'Captcha is required.'};
    } else {
        this.setState({
            btnDisabled: false
        });
    }
}

附注:您永远不应该依赖客户端验证.用户可以轻松绕过客户端验证.因此,您也应该实现服务器端验证.

var Recaptcha = require('react-recaptcha');

// specifying verify callback function
var verifyCallback = function (response) {
   this.setState({
        reCaptchaResponse: response
    });
};

ReactDOM.render(
  ,
  document.getElementById('example')
);

你可以通过道具verifyCallBack来react-recaptcha,在回调函数可以存储在状态或任何你想要的反应.现在,如果响应为空,您只需禁用下一个按钮,或者可以在用户单击验证时进行验证.

例如,如果要将响应存储在状态中,则可以检查reCaptcha响应是否为空.

validateForm() {

    // other field validations....

    if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
        return {success: false, message: 'Captcha is required.'};
    }
}

编辑:对于编辑过的问题,您还可以创建一个状态变量btnDisabled,并用true初始化它.

constructor() {
     super();
     this.state = {btnDisabled: true};
}

和Next按钮为

Next

现在,在您的validateForm方法中,您可以检查reCaptcha响应是否为空,并根据您可以将btnDisabled变量设置为true或false.

validateForm() {

    // other field validations....

    if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
        return {success: false, message: 'Captcha is required.'};
    } else {
        this.setState({
            btnDisabled: false
        });
    }
}

附注:您永远不应该依赖客户端验证.用户可以轻松绕过客户端验证.因此,您也应该实现服务器端验证.