谷歌recaptcha通過反應路由器更改組件後隱藏

我有這個問題，當我從一個組件切換到其他組件使用反應路由器我的谷歌recaptcha div停止顯示。我與谷歌的reCAPTCHA谷歌recaptcha通過反應路由器更改組件後隱藏

class Contact extends React.Component{ 
    constructor(props){ 
    super(props); 
    document.title = "Contact"; 
    } 
    errorHandle(err){ 
    let loc = document.getElementById("err-" + err); 
    loc.className = "error-live"; 
    setTimeout(() =>{ 
     loc.className = "error"; 
    },errSpeed); 
    } 
    sendMail(e){ 
    e.preventDefault(); 
    let message = document.getElementById("message").value, 
     name = document.getElementById("name").value, 
     email = document.getElementById("email").value, 
     captcha = grecaptcha.getResponse(); 
    if(email.length < 4 || email.length < 4 || name.length < 4){ 
     this.errorHandle("short"); 
     return; 
    }else if(email.indexOf("@") === -1){ 
     this.errorHandle("email");//make error 
     return; 
    }else if(captcha.length === 0){ 
     this.errorHandle("recaptcha");//make error 
     return; 
    } 
    sa 
     .post("./back-end/contact.php") 
     .send({name,email,message,captcha}) 
     .type("application/x-www-form-urlencoded") 
     .end(function(err,res){ 
     res = res.text; 
     if(res.search("sent") > 0){ 
      dbId("contact-done").style.display = "block"; 
      dbId("contact").style.opacity = 0; 
      dbId("contact-done").style.opacity = 1; 
      setTimeout(() =>{ 
      window.location.replace(window.location.href.replace("contact","")); 
      },errSpeed); 
     }else if(res === "failToSend") 
      alert("Failed to send the message please try again"); 
     }) 

    } 
    render(){ 
    return(
     <div className = "contact"> 
     <div id = "contact-done"><p>Thank you for contacting us</p></div> 
     <form id = "contact" className="pure-form pure-form-stacked"> 
      <fieldset> 
      <legend>Contact me</legend> 

      <label>Name</label> 
      <input id="name" type="text" placeholder="Name"></input> 

      <label>Email</label> 
      <input id="email" type="email" placeholder="Email"></input> 

      <label>Message</label> 
      <textarea id = "message"></textarea> 

      <div id = "recaptcha-contact" className="g-recaptcha" data-sitekey="myKeyHere"></div> 

      <div id = "err-email" className = "error">Invalid Email adress</div> 
      <div id = "err-recaptcha" className = "error">Please fill in google recaptcha</div> 
      <div id = "err-short" className = "error">Each field has to be atleast 4 characters long</div> 

      <button onClick = {this.sendMail.bind(this)} className="pure-button pure-button-primary">Send</button> 
     </fieldset> 
     </form> 
    </div> 
    ); 
    } 
}

組件如果我加載http://localhost/contact它顯示了，然而由於soonas我改變路徑，可以說http://localhost/articles並切換回它disappears.What可能是原因？

謝謝你的時間。

來源

2016-09-15 August

我搜索了一會兒，找不到解決問題的辦法，我最後做的是重新繪製每次組件被訪問的ReCaptcha：

componentDidMount(){ 
    setTimeout(() =>{ 
    window.grecaptcha.render('recaptcha-contact', { 
     sitekey: "key", 
     callback: function(resp){} 
    }); 
    },300); 
}

超時是存在的，因爲grecaptcha將是不確定的。

來源

2016-09-15 09:23:16 August

谷歌recaptcha通過反應路由器更改組件後隱藏

回答

相關問題