0

我对反应/钩子非常陌生，并且努力让 Google recaptcha 正常工作。

这就是我的app.js的样子：

import ConfirmationPage from './Pages/ConfirmationPage';

function App() {
  const [email, setEmail] = React.useState('');
  const captchaRef = useRef({});

  function someFunction() {
      //Uses captchaRef to do something
  }

  return (
    <ConfirmationPage email={email} setEmail={setEmail} captchaRef={captchaRef}></ConfirmationPage>
  );
}

这就是我的ConfirmationPage.js的样子：

import ReCAPTCHA from "react-google-recaptcha";
import { Grid, TextField, Divider } from '@material-ui/core';

export default function ConfirmationPage({email, setEmail, captchaRef}) {
  function onChange(value) {
    console.log("Captcha Verified");
  }

 function handleEmailBlur(email){        
        setEmail(email);
     }

  return (
    <> 
      <TextField
           required
           id="txt_summary_email"
           label={'Email'}
           defaultValue={email}
           className={classes.FulltextField}
           margin="normal"
           onBlur={event=>handleEmailBlur(event.target.value)}                              
          />
        <ReCAPTCHA
            ref ={captchaRef}
            sitekey={process.env.REACT_APP_CAPTCHAKEY}
            onChange={onChange}
         /> 
    </>
  );

当用户尝试在 txt_summary_email 文本字段中输入电子邮件值时会出现问题，验证码会重新呈现自身并失去其验证状态。换句话说，通过单击空框并尝试在文本字段中输入电子邮件来验证 Captcha，Captcha 将失去验证检查。

这是由于 handleEmailBlur 函数中的 setEmail(email) 造成的。如果我注释掉 setEmail(email)，Captcha 不会重新呈现自己。看起来 app.js 中的设置状态会以某种方式触发验证码重新加载。

触发 setState 时，如何防止重新渲染验证码？

非常感谢您的帮助！

4

0 回答 0