Question

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

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

这是我的回调和verifyCallback方法：

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

谢谢

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

var clicked_submit = false;
$(document).ready(function () {
      $('#submit-button').click(function () {
          clicked_submit = true;
      });
      window.onbeforeunload = function () {
         if (clicked_submit){
             return; // equal to return undefined;
         } else {
             return 'Are you sure?'
         }
     }
});

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，在该回调函数中，您可以将响应存储在州或任何您想要的位置。现在，如果响应为空，您只需禁用下一个按钮，或者在用户点击验证时进行验证。

e.g。如果您正在以状态存储响应，那么您可以检查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
        });
    }
}

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

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

1 个答案: