reactjs - 重置 recaptcha 时出现问题 - 无法读取代码的 null 属性“重置”

Question

react-google-recaptcha 版本：2.0.0-rc.1

我在重置 recaptcha 时遇到问题

我正在使用功能组件

代码摘录如下

// imports etc.. here
const Login: NextPage = (props:any) => {

// othere initializations here...

const recaptchaInputRef:any = React.createRef();

const handleSubmit = async (event) => {

      // some if condition
     // and else
     // and inside there
     recaptchaInputRef.current.reset();

}

return (
        <React.Fragment>

               <form onSubmit={e => handleSubmit(e)}>

               // other components and elements

              <ReCAPTCHA
                 ref={recaptchaInputRef}
                 sitekey={props.recaptchaKey}
                 onChange={ onChange }
                 onExpired={ onExpired }
                 />

              <Button type="submit">Sign In</Button>
              </form>
        </React.Fragment>
);

现在的问题是，我得到 - 无法读取代码的 null 属性“重置”->recaptchaInputRef.current.reset();

Answer 1

我更改了对元素的引用，如下所示：-

const recaptchaInputRef:any = useRef({});

// this is the new react hooks way of the reference declaration

这对我来说非常有效，但我很乐意在这方面做得更好