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

在我的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)
    />

多谢各位

我添加了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;
 }

验证回调（响应）{
这是我的国家({
回复：回复，
});
}
validateForm（）{
如果（！this.state.reCaptchaResponse | | this.state.reCaptchaResponse.trim（）.length==0）{
返回false；
}
返回true；
}

编辑：对于已编辑的问题， 您还可以创建一个状态变量，比如

btnDisabled

，并用true初始化它

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

和

Next

按钮

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

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

编辑：对于已编辑的问题， 您还可以创建一个状态变量，比如

btnDisabled

，并用true初始化它

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

和

Next

按钮

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

---

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

您是否使用redux表单处理表单？不，我没有使用redux表单，用户正在填写表单，当他单击“下一步”时，会简单地重定向到下一页。我现在不想在服务器端验证recaptcha，只有在我的前端，您是否使用react-recaptcha？不，我使用react-recaptcha：您是否使用redux表单处理表单？不，我没有使用redux表单，用户正在填写表单，当他单击“下一步”时，会简单地重定向到下一页。我现在不想在服务器端验证recaptcha，只有在我的前端，您使用的是react-recaptcha吗？不，我使用的是react-recaptcha：谢谢您的回答，是否有可能使validateForm返回true，然后在我的DisableText属性中：DisableText={this.validateForm（）==false}是的，您是对的。如果验证表单返回false，则禁用

next

按钮作为

next

。但同样，你不应该依赖客户端验证。不，不幸的是，它没有起作用，我按照你建议的代码编辑了我的帖子，你面临什么问题？我的下一步按钮甚至在验证码填充之前就已启用谢谢你的回答，有没有可能使validateForm返回true，然后在我的disableNext属性中：disableNext={this.validateForm（）==false}是的，你是对的。如果验证表单返回false，则禁用

next

按钮作为

next

。但同样，你不应该依赖客户端验证。不，它没有起作用。不幸的是，我按照你建议的代码编辑了我的帖子，你面临什么问题？我的下一步按钮甚至在验证码填充之前就启用了

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

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