Reactjs 如何让谷歌、福米克和yup一起工作？

我想让大家都看不见，一起工作。文档中说我们应该在表单提交时调用

recaptchaRef.current.execute（）

，但是如果我们同时使用Formik和yup，那么只有在所有字段通过验证模式后，它才会触发提交逻辑

基本上，我们需要调用

execute

方法，更新recaptcha值并使用相同的触发器事件提交表单。我的问题就是：我必须使用两个事件（一个用于

execute

方法，另一个用于更新recaptcha+1以提交表单）

检查此沙箱：

---

如您所见，表单只需在提交按钮中单击第二次就可以提交…

使用Formik，有一些方法可以为表单进行后台工作。这基本上可以通过将

handleChange

或

handleBlur

道具传递给表单组件来实现

例如，我确信表单元素中会有其他输入，而不仅仅是验证码（

如果表单中只有验证码，那么一定要告诉我！-这也可以解决

）

因此，当您有其他元素时，您可以确保使用一些Formik的API来处理自动触发器：

• 事件来触发ReCaptcha
• 控制“提交”按钮的状态
• 事件来操纵按钮的状态

正如我所看到的，有很多方法可以通过他们的API来处理这个问题：

我试图实现它的方法是在所有字段上为

onBlur

添加一个侦听器，然后检查reCaptcha值是否存在。基于此，我触发执行验证码并确保将提交值设置为true：

const handleBlur = (e) => {
  console.log("$$$$", props.isSubmitting);
  if (!props.values.recaptcha) {
    this._reCaptchaRef.current.execute();
    props.setSubmitting(true);
  }
  props.handleBlur(e);
};

以下是CodeSandbox链接：

这显示了处理字段的

onBlur

并在后台触发它的工作模型。如果您注意到，还可以使用

isSubmitting

和

setSubmitting

禁用和启用提交按钮

同时设置

validateOnChange={false}

和

validateOnBlur={false}

，因为不需要对captcha进行更改或模糊验证

在此处粘贴代码，以防您浏览：

import React, { Component, createRef } from "react";

import ReCAPTCHA from "react-google-recaptcha";
import { Formik } from "formik";
import * as yup from "yup";

const TEST_SITE_KEY = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI";

export default class MyForm extends Component {
  constructor(props) {
    super(props);
    this._validationSchema = yup.object().shape({
      recaptcha: yup.string().required(),
      name: yup.string().required(),
      address: yup.string().required()
    });
    this._initialValues = { recaptcha: "", name: "", address: "" };
    this._reCaptchaRef = createRef();
  }

  render() {
    return (
      <Formik
        validationSchema={this._validationSchema}
        initialValues={this._initialValues}
        validateOnChange={false}
        validateOnBlur={false}
        onSubmit={(values) => console.log(values)}
      >
        {(props) => {
          const handleBlur = (e) => {
            console.log("$$$$", props.isSubmitting);
            if (!props.values.recaptcha) {
              this._reCaptchaRef.current.execute();
              props.setSubmitting(true);
            }
            props.handleBlur(e);
          };

          return (
            <form onSubmit={props.handleSubmit}>
              <label>Name: </label>
              <input
                type="text"
                onChange={props.handleChange}
                value={props.values.name}
                name="name"
                onBlur={handleBlur}
              />
              <label>Address: </label>
              <input
                type="text"
                onChange={props.handleChange}
                value={props.values.address}
                name="address"
                onBlur={handleBlur}
              />
              <ReCAPTCHA
                ref={this._reCaptchaRef}
                sitekey={TEST_SITE_KEY}
                onChange={(value) => {
                  console.log("$$$$", props.isSubmitting, value);
                  props.setFieldValue("recaptcha", value);
                  props.setSubmitting(false);
                }}
                size="invisible"
              />
              <button type="submit" disabled={props.isSubmitting}>
                SUBMIT
              </button>

              {props.errors.name && <div>{props.errors.name}</div>}
            </form>
          );
        }}
      </Formik>
    );
  }
}

import React，{Component，createRef}来自“React”；
从“react google ReCAPTCHA”导入ReCAPTCHA；
从“Formik”导入{Formik}；
从“yup”导入*作为yup；
const TEST_SITE_KEY=“6leixactaaaajczvrqyh71umiegnq_MXjiZKhI”；
导出默认类MyForm扩展组件{
建造师（道具）{
超级（道具）；
这是._validationSchema=yup.object（）.shape({
recaptcha:yup.string（）.required（），
名称：yup.string（）.required（），
地址：yup.string（）.required（）
});
这._initialValues={recomptcha:，name:，address:：}；
这是._reCaptchaRef=createRef（）；
}
render（）{
返回(
console.log（值）}
>
{（道具）=>{
常量车把LUR=（e）=>{
console.log（“$$”，props.isSubmitting）；
如果（！props.values.recaptcha）{
这是._reCaptchaRef.current.execute（）；
道具设置提交（正确）；
}
道具.把手（e）；
};
返回(
姓名：
地址:
{
console.log（“$$”，props.isSubmitting，value）；
props.setFieldValue（“recaptcha”，value）；
道具设置提交（假）；
}}
size=“不可见”
/>
提交
{props.errors.name&&{props.errors.name}
);
}}
);
}
}

这个答案似乎是我现在所需要的一切，但它根本不适合我。我使用的是functional component和withFormik，但基本原理是一样的——我有handleBlur事件，它使用useRef（）hook创建的ref并调用_reCaptchaRef.current.execute（），但什么都没有发生。请求没有被发送（我查看了dev工具中的network选项卡），并且ReCAPTCHA onChange从不触发。我不知道发生了什么。@OdifYltsaeb如果可能的话，可以随意分享代码沙盒。将检查并提供我在那里找到的任何东西的信息。以下是我的基本示例：功能组件似乎有问题。我重新创建了与基于类的组件相同的组件，效果很好：（如果您使用的测试键不是当前的键）@OdifYltsaeb将您的

import{repactcha}从“react google repactcha”更改为“react google repactcha”至
从“react google ReCAPTCHA”导入ReCAPTCHA
在您的codesandbox中，它正在工作