如何使用 react-google-recaptcha 重置 Google recaptcha
How to reset Google recaptcha with react-google-recaptcha
看起来 google recaptcha 的工作方式是，如果使用特定令牌进行了验证尝试，则无法再次使用。
文档指出“您将需要调用 grecaptcha.reset() 以要求最终用户再次使用 reCAPTCHA 进行验证”
我正在尝试使用 react-google-recaptcha npm 包进行尝试。
这是我的代码：
function onChange(grecaptcha) {
console.log(grecaptcha);
grecaptcha.reset(); // this doesn't work
}
class Captcha extends React.Component {
render() {
return <div>
<Recaptcha
sitekey='#'
onChange={onChange(this)}
/> </div>
}
}
当我尝试使用带有响应和秘密值的 google api https://www.google.com/recaptcha/api/siteverify 进行服务器端验证时，成功响应在第一次验证后始终评估为“false” .
为了防止这种情况，我按照文档中的建议重置了 grecaptcha，但它不起作用。
我有什么遗漏的吗？
提前致谢
编辑：
https://github.com/dozoisch/react-google-recaptcha 提供了 reset() 实用函数，这是我在用户解决验证码后尝试调用的函数，想知道我是否没有以正确的方式调用它。
我遇到了类似的问题，不得不将其更改为：
window.grecaptcha.reset();
你可以试试Reaptcha。
它在处理 reCAPTCHA 时比 react-google-recaptcha 有更多的反应方式方法。
引用文档：
<Reaptcha
ref={e => (this.captcha = e)}
sitekey="YOUR_API_KEY"
onVerify={() => {
// Do something
}}
/>
<button onClick={this.captcha.reset}>
Reset
</button>
首先为元素设置一个适当范围的变量，然后使用 ref 回调分配它：
let captcha;
<Recaptcha
sitekey={sitekey}
onChange={...}
ref={el => { captcha = el; }}
/>
然后您可以在需要时通过调用captcha.reset()来访问重置功能（例如发送消息成功后的回调、注册等）。希望对您有所帮助。
google-react-recaptcha 遵循语法：
<ReCAPTCHA
sitekey="Your client site key"
onChange={onChange}
/>
您可以使用 reset() 组件实例进行重置。
要访问它，您需要 ref.
这样进行：
<ReCAPTCHA
ref={(r) => this.captcha = r}
sitekey="Your client site key"
onChange={onChange}
/>
现在，只要您想重置验证码，请输入：
this.captcha.reset()
你就完成了。
理想情况下，应该在表单提交后，一旦你收到回复就这样做。
好吧，这只是一个额外的好处，或者是上述所有方法的更详尽的方法。我正在使用 react-google-recaptcha，所以这是 reactJS，直到我看到这个，我才找到解决重置问题的方法。这很简单。正如@sarneeh、@Chris 和@AdityaSrivast
所指出的那样，我只是向大多数新手解释我认为我正在做的事情
这是我的代码片段。
Captcha.js
import React from "react";
import ReCAPTCHA from "react-google-recaptcha";
const CaptchaVerify = ({yourprops}) => {
let captcha;
const onChange = (value) => {
console.log(value);
}
const setCaptchaRef = (ref) => {
if (ref) {
return captcha = ref;
}
};
const resetCaptcha = () => {
// maybe set it till after is submitted
captcha.reset();
}
return (
<ReCAPTCHA
ref={(r) => setCaptchaRef(r) }
sitekey={process.env.REACT_APP_V2_CAPTCHA_SITE_KEY}
onChange={onChange, () => resetCaptcha()}
theme="light"
/>
)
};
export default CaptchaVerify;
具有功能组件和 createRef 的解决方案：
在函数体中：
const recaptchaRef = React.createRef();
在 JSX 中：
<ReCAPTCHA
ref={recaptchaRef}
name="recaptcha"
id="recaptcha"
sitekey="...."
onChange={(token)=>{console.log(token);}}
onExpired={() => {
recaptchaRef.current.reset(); // here
}}
theme="light"
/>
在 TypeScript 中你可以这样做：
const recaptchaRef = useRef<ReCAPTCHA>(null);
/* make sure it is null at first */
然后：
<ReCAPTCHA
ref={recaptchaRef}
sitekey={'key'}
onChange={(e) => onCaptchaVerify(`${e}`)}
/>;
然后你可以在表单提交后或者你想重置验证码的地方使用：
recaptchaRef.current?.reset();
看起来 google recaptcha 的工作方式是，如果使用特定令牌进行了验证尝试，则无法再次使用。
文档指出“您将需要调用 grecaptcha.reset() 以要求最终用户再次使用 reCAPTCHA 进行验证”
我正在尝试使用 react-google-recaptcha npm 包进行尝试。
这是我的代码：
function onChange(grecaptcha) {
console.log(grecaptcha);
grecaptcha.reset(); // this doesn't work
}
class Captcha extends React.Component {
render() {
return <div>
<Recaptcha
sitekey='#'
onChange={onChange(this)}
/> </div>
}
}
当我尝试使用带有响应和秘密值的 google api https://www.google.com/recaptcha/api/siteverify 进行服务器端验证时，成功响应在第一次验证后始终评估为“false” . 为了防止这种情况，我按照文档中的建议重置了 grecaptcha，但它不起作用。
我有什么遗漏的吗？
提前致谢
编辑：
https://github.com/dozoisch/react-google-recaptcha 提供了 reset() 实用函数，这是我在用户解决验证码后尝试调用的函数，想知道我是否没有以正确的方式调用它。
我遇到了类似的问题，不得不将其更改为：
window.grecaptcha.reset();
你可以试试Reaptcha。
它在处理 reCAPTCHA 时比 react-google-recaptcha 有更多的反应方式方法。
引用文档：
<Reaptcha
ref={e => (this.captcha = e)}
sitekey="YOUR_API_KEY"
onVerify={() => {
// Do something
}}
/>
<button onClick={this.captcha.reset}>
Reset
</button>
首先为元素设置一个适当范围的变量，然后使用 ref 回调分配它：
let captcha;
<Recaptcha
sitekey={sitekey}
onChange={...}
ref={el => { captcha = el; }}
/>
然后您可以在需要时通过调用captcha.reset()来访问重置功能（例如发送消息成功后的回调、注册等）。希望对您有所帮助。
google-react-recaptcha 遵循语法：
<ReCAPTCHA
sitekey="Your client site key"
onChange={onChange}
/>
您可以使用 reset() 组件实例进行重置。
要访问它，您需要 ref.
这样进行：
<ReCAPTCHA
ref={(r) => this.captcha = r}
sitekey="Your client site key"
onChange={onChange}
/>
现在，只要您想重置验证码，请输入：
this.captcha.reset()
你就完成了。
理想情况下，应该在表单提交后，一旦你收到回复就这样做。
好吧，这只是一个额外的好处，或者是上述所有方法的更详尽的方法。我正在使用 react-google-recaptcha，所以这是 reactJS，直到我看到这个，我才找到解决重置问题的方法。这很简单。正如@sarneeh、@Chris 和@AdityaSrivast
所指出的那样，我只是向大多数新手解释我认为我正在做的事情这是我的代码片段。
Captcha.js
import React from "react";
import ReCAPTCHA from "react-google-recaptcha";
const CaptchaVerify = ({yourprops}) => {
let captcha;
const onChange = (value) => {
console.log(value);
}
const setCaptchaRef = (ref) => {
if (ref) {
return captcha = ref;
}
};
const resetCaptcha = () => {
// maybe set it till after is submitted
captcha.reset();
}
return (
<ReCAPTCHA
ref={(r) => setCaptchaRef(r) }
sitekey={process.env.REACT_APP_V2_CAPTCHA_SITE_KEY}
onChange={onChange, () => resetCaptcha()}
theme="light"
/>
)
};
export default CaptchaVerify;
具有功能组件和 createRef 的解决方案：
在函数体中：
const recaptchaRef = React.createRef();
在 JSX 中：
<ReCAPTCHA
ref={recaptchaRef}
name="recaptcha"
id="recaptcha"
sitekey="...."
onChange={(token)=>{console.log(token);}}
onExpired={() => {
recaptchaRef.current.reset(); // here
}}
theme="light"
/>
在 TypeScript 中你可以这样做：
const recaptchaRef = useRef<ReCAPTCHA>(null);
/* make sure it is null at first */
然后：
<ReCAPTCHA
ref={recaptchaRef}
sitekey={'key'}
onChange={(e) => onCaptchaVerify(`${e}`)}
/>;
然后你可以在表单提交后或者你想重置验证码的地方使用：
recaptchaRef.current?.reset();