reactjs - 使用 react-google-recaptcha-v3 库

Question

我是新来的反应并尝试使用 react-google-recaptcha-v3 库。

我将它与 formik 表单一起使用并使用 axios 发布数据。当我在我的标题中发布一个硬编码的 recaptcha 令牌时，它会起作用。但是当我尝试将令牌与 react-google-recaptcha-v3 库一起使用时，它不起作用。我想我用错了。

return (
  <GoogleReCaptchaProvider reCaptchaKey='MY-KEY'>
    <GoogleReCaptcha onVerify={token => this.setState({ recaptchaToken: token })} />
  <Grid>
    <Row>
      <Col xs={6} xsOffset={3} id='auth-form-container'>
        <Formik
          initialValues={{ email: "" }}
          validationSchema={forgotPasswordSchema}
          onSubmit={(values, { setErrors, setSubmitting }) => {

            const headers = {
              headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
                recaptcha: this.state.recaptchaToken
              }
            };

            const body = {
              UsernameOrEmail: values.email,
              ReturnUrl: "/"
            };

            const url = "http://localhost:5000/api/Users/ResetPassword";

            axios
              .post(url, body, headers)
              .then(result => {
                // Do somthing
                setSubmitting(false);
                this.handleSuccess(result);
              })
              .catch(error => {
                // Do somthing
                setSubmitting(false);
                //TODO: Add logging
                console.log("Fejl");
                if (error.response.status === 400) {
                  console.log("Bad Request ...");
                  this.setState({ errorMessage: "Bad Request" });
                } else {
                  console.log("Something went wrong ...");
                  this.setState({ errorMessage: "Something went wrong" });
                }
              });
          }}>
          {({ isSubmitting }) => (
            <Form>
              {errorMessage ? <Error errorMessage={errorMessage} /> : null}
              <Row>
                <Col xs={12}>
                  <label htmlFor='email'>E-mail:</label>
                  <Field type='email' name='email' />
                  <ErrorMessage name='email'>{msg => <div className='error'>{msg}</div>}</ErrorMessage>
                </Col>
              </Row>
              <Row>
                <Col xs={12}>
                  <button type='submit' disabled={isSubmitting}>
                    Reset password
                  </button>
                </Col>
              </Row>
              <Row>
                <Col xs={12}>
                  <ul>
                    <li>
                      <Link to='/'>Back to login</Link>
                    </li>
                  </ul>
                </Col>
              </Row>
            </Form>
          )}
        </Formik>
      </Col>
    </Row>
  </Grid>
  </GoogleReCaptchaProvider>
);

标签： reactjsrecaptcharecaptcha-v3