How do I get the response from Inside my class

[hkrdrm]

Basically I'm trying to validate the response from inside my _onSubmit() function is this possible I've tried moving the callback function inside the class so i could use setState or something but Recaptcha fails to locate the function if i put it inside the class.

I'm thinking maybe the better idea is to probably is to check the validation server side right? I'm probably implementing recaptcha wrong trying to handle everything client side?

  class ContactForm extends React.Component{
  constructor(){
    super();
    this._onSubmit = this._onSubmit.bind(this);
  }

  _onSubmit(e){
    //I WANT TO VALIDATE THE RESPONSE HERE
  }

  render(){
    return(
     <form className="form-horizontal" onSubmit={this._onSubmit} >
      <Recaptcha sitekey="*****" render="explicit" verifyCallback={captchaReturn} onloadCallback={onloadCallback} />

      <button type="submit" id="myBtn" disabled="true" className="btn btn-default">Submit</button>
    </form>
    );
  }
}

let captchaReturn = function(response){
  if(response.length === 0){
    alert("no");
  }
  else {
    document.getElementById("myBtn").disabled = false;
  }
}

let onloadCallback = function() {

}

[pietrofxq]

Trying the same thing. My function to verify the recaptcha must be inside the class so it can update it's state, but it doesn't seem to be working

[aqibos]

Just a thought:

You can use state to manage the validation. For example, it seems like you want to disable/enable the submit button depending on the validation.

import axios from 'axios'

class ContactForm extends Component {
  constructor(props) {
    super(props)
    this.state = { isValidCaptcha: false }
  }

  render() {
    return <form className="form-horizontal" onSubmit={ onSubmit.bind(this) } >
      <Recaptcha 
        sitekey="*****" 
        render="explicit" 
        verifyCallback={ captchaReturn.bind(this) } 
        onloadCallback={ /* onloadCallback */ } />
      <button 
        type="submit" 
        id="myBtn" 
        disabled={ !this.state.isValidCaptcha }
        className="btn btn-default">Submit</button>
    </form>

    function captchaReturn(response) {
      /* 
        Make request to your backend to verify. 
        For more info, see: https://developers.google.com/recaptcha/docs/verify
        For example: 
      */
      axios.post('https://your.backend.api', { response })
      .then(res => this.setState({ isValidCaptcha: res.data.success })) 
      .catch(err => { /* Handle error */ })
    }

    function onSubmit() { /* Handle submit */ } 
  }
}