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

Question

在我的react-redux表单中,我想重新打包一个必填字段,并禁用我的导航栏组件,直到重新验证回复,我发现一些类似的问题与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
        });
    }
}

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