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

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')
);

您可以将道具 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 按钮作为

<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
        });
    }
}

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