谷歌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通过反应路由器更改组件后隐藏

回答

相关问题