当网站更改语言时,react-recaptcha 不会更新其语言显示
react-recaptcha not update its language display when the sites change language
编辑:
我尝试按照下面的 link 通过 recaptchaInstance.reset().
重置验证码
我添加了 constructor(), ref={e => recaptchaInstance = e} on ,
recaptchaInstance.reset() on componentWillMount().
error shows
TypeError: Cannot read property 'reset' of undefined
https://www.npmjs.com/package/react-recaptcha
初始问题:
当我 npm 启动项目时,recaptcha 显示正确的语言。
但是当我使用 changeLanguage() 更改网站的语言时,
验证码的语言总是显示 zh_tw.
我检查了 recaptcha 的 prop hl,当我更改我的网站的语言时,它会显示每次更改的正确值。
我尝试刷新页面,但 recaptcha 仍然显示不正确的语言
似乎在 window.location.reload().
之后 recaptcha 不会重新呈现
如何解决此问题并在 window.location.reload() 运行 时重置验证码?
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。
编辑:
我尝试按照下面的 link 通过 recaptchaInstance.reset().
重置验证码
我添加了 constructor(), ref={e => recaptchaInstance = e} on ,
recaptchaInstance.reset() on componentWillMount().
error shows
TypeError: Cannot read property 'reset' of undefined
https://www.npmjs.com/package/react-recaptcha
初始问题:
当我 npm 启动项目时,recaptcha 显示正确的语言。
但是当我使用 changeLanguage() 更改网站的语言时,
验证码的语言总是显示 zh_tw.
我检查了 recaptcha 的 prop hl,当我更改我的网站的语言时,它会显示每次更改的正确值。
我尝试刷新页面,但 recaptcha 仍然显示不正确的语言
似乎在 window.location.reload().
如何解决此问题并在 window.location.reload() 运行 时重置验证码?
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。