javascript - React-Redux : how to make ReCaptcha a required field

Question

在我的react-redux表单中，我想将recaptcha设置为必填字段，并禁用我的导航栏组件，直到验证recaptcha响应，我发现了一些与javaScript类似的问题，但我无法将它们应用于React，因为我正在使用react-recaptcha插件:

  <div className="form_wrapper">
  <ReCAPTCHA
            sitekey="xxxxxxxxxxx"
            render="explicit"
            onloadCallback={this.callback}
            verifyCallback={this.verifyCallback}
          />
  </div>
  <NavigationBar
     fields={requiredFields}
    // disableNext={this.props} (here where i make conditions to disable)
    />

这是我的回调和 verifyCallback 方法:

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

谢谢

我添加了Hardik Modha建议的代码，如下但仍然存在相同的问题:

 <NavigationBar
     fields={requiredFields}
     disableNext={this.props ... && !this.validateForm()} 
    />

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

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

Answer 1

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

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

ReactDOM.render(
  <Recaptcha
    sitekey="xxxxxxxxxxxxxxxxxxxx"
    render="explicit"
    verifyCallback={verifyCallback}
    onloadCallback={callback}
  />,
  document.getElementById('example')
);

您可以将 prop 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};
}

和下一步按钮为

<button disabled={this.state.btnDisabled}>Next</button>

现在，在 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
        });
    }
}

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