如何解决网站更改语言时,react-recaptcha不会更新其语言显示
修改:
我试图按照下面的链接通过recaptchaInstance.reset()重置Recaptcha。
我在componentWillMount()的
recaptchaInstance.reset()上的ref = {e => recaptchaInstance = e}上添加了Constructor()。
错误显示
TypeError: Cannot read property 'reset' of undefined
https://www.npmjs.com/package/react-recaptcha
最初的问题:
当我npm启动项目时,recaptcha显示正确的语言。
但是当我使用changeLanguage()更改网站的语言时,
Recaptcha的语言始终显示zh_tw。
我检查了recaptcha的属性hl,当我更改网站的语言时,它会为每次更改显示正确的值。
我尝试刷新页面,但是recaptcha仍然显示不正确的语言
好像recaptcha不会在window.location.reload()之后重新呈现。
运行window.location.reload()时,如何解决此问题并重置Recaptcha?
login.jsx
import React from "react";
import Recaptcha from 'react-recaptcha'
...
let recaptchaInstance;
class Login extends Component {
constructor() { //add after edit
super();
this.key = 0;
}
state = {
...
recapchaLang: '',};
componentWillMount(){
recaptchaInstance.reset(); //add after edit
this.setState({
recapchaLang: localStorage.getItem('currentLang') === 'en' ? 'en' : localStorage.getItem('currentLang') === 'tw'? 'zh-TW':localStorage.getItem('currentLang') === 'cn'?'zh-CN':''
})
}
...
render(){
<Recaptcha
key={this.key} //add after edit
ref={e => (recaptchaInstance = e)} //add after edit
sitekey={window.RECAPTCHA_KEY}
render="explicit"
hl = {this.state.recapchaLang}
verifyCallback = {() =>{this.setState({isVerifiedByRecaptcha:true,showRecaptchaAlert:false})}}
/>
}
}
FirstPage.jsx
...
class FirstPage extends Component {
changeLanguage = (lang) => {
localStorage.setItem("currentLang",lang);
i18n.changeLanguage(lang);
window.location.reload();
};
render() {
...
<Login />
<span onClick={() => this.changeLanguage("zh")}>TW</span>|
<span onClick={() => this.changeLanguage("cn")}>CN</span>|
<span onClick={() => this.changeLanguage("en")}>EN</span>
}
}
解决方法
问题解决了。
我只是更改为使用react-google-recaptcha而不是react-recaptcha。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。