Javascript 禁用表单提交按钮，直到用户选中recaptcha复选框

我试图禁用表单的提交按钮，直到用户单击Google Recaptcha复选框“我不是机器人”

我是否需要下载特定于Google Recaptcha的React组件

下面是我的简单组件，其中包含Google Recaptcha：

const RecaptchaComponent = () => {
    useEffect(() => {
        // Add reCaptcha
        const script = document.createElement("script");
        script.src = "https://www.google.com/recaptcha/api.js"
        document.body.appendChild(script);
    }, [])

    return (
        <div
            className="g-recaptcha"
            data-sitekey="6LeS8_IdfdfLtQzwUgNV4545454lhvglswww14U"
        ></div>
    )
};

const RecaptchaComponent=（）=>{
useffect（（）=>{
//添加reCaptcha
常量脚本=document.createElement（“脚本”）；
script.src=”https://www.google.com/recaptcha/api.js"
document.body.appendChild（脚本）；
}, [])
返回(
)
};

这是我表格的提交代码：

const GameForm = () => (

<div className="app">

    <Formik
        initialValues={{
            email: "",
            name: "",
            title: ""

        }}

        onSubmit={(values) => {
            //new Promise(resolve => setTimeout(resolve, 500));
            axios({
                method: "POST",
                url: "api/gameform",
                data: JSON.stringify(values),
            });
        }}
    >

        {props => {
            const {
                values,
                isSubmitting,
                handleSubmit,

            } = props;

            return (
                <form onSubmit={handleSubmit}>

                    <div>Your Game</div>

                    <label htmlFor="title">
                        Game Title:
                    </label>
                    <Field
                        id="title"
                        type="text"
                        values={values.title}
                    />

                    <label htmlFor="name">
                        Name:
                    </label>
                    <Field
                        id="name"
                        type="text"
                        value={values.name}
                    />

                    <label htmlFor="email">
                        Email:
                    </label>
                    <Field
                        id="email"
                        name="email"
                        type="email"
                        value={values.email}
                    />

                    <div>
                    <ReCAPTCHA 
                        sitekey="6LeS8_IUAAAAAhteegfgwwewqe223" 
                        onChange={useCallback(() => setDisableSubmit(false))}
 />
                    </div>
                    <div>
                        <Button type="submit">
                            Submit
                        </Button>
                    </div>
                </form>
            );
        }}
    </Formik>

</div>
);

const GameForm=（）=>(
{
//新承诺（resolve=>setTimeout（resolve，500））；
axios({
方法：“张贴”，
url:“api/gameform”，
数据：JSON.stringify（值），
});
}}
>
{props=>{
常数{
价值观
提交，
手推，
}=道具；
返回(
你的游戏
游戏名称：
姓名：
电邮：
setDisableSubmit（false））}
/>
提交
);
}}
);

您不需要使用，但它更简单

export const MyForm = () => {

   const [disableSubmit,setDisableSubmit] = useState(true);

   return (
     ... rest of your form
     <ReCAPTCHA 
         sitekey="6LeS8_IdfdfLtQzwUgNV4545454lhvglswww14U" 
         onChange={useCallback(() => setDisableSubmit(false))}
     />
     <button type="submit" disabled={disableSubmit}>Submit</button>
   )

}

export const MyForm=（）=>{
const[disableSubmit，setDisableSubmit]=useState（true）；
返回(
…剩下的部分
setDisableSubmit（false））}
/>
提交
)
}

编辑：

我最大的不满之一是看到React教程，其中作者鼓励开发人员使用返回JSX的函数，而不仅仅是使用功能组件

Formik的“子函数”模式很粗糙（dom也做同样的事情）-它应该是一个组件：

const GameForm = () => {
  return <Formik ...your props>{props => <YourForm {...props}/>}</Formik>
}

const YourForm = (props) => {
   const [disableSubmit,setDisableSubmit] = useState(true);


   ... everything inside the child function in `GameForm`
}

const GameForm=（）=>{
返回{props=>}
}
const YourForm=（道具）=>{
const[disableSubmit，setDisableSubmit]=useState（true）；
…子函数中的所有内容都以“游戏形式”`
}

谢谢你的提问。这是链接到的react组件的代码吗？因此，基本上，如果用户没有单击“我不是机器人”复选框，这只是设置disableSubmit的状态？谢谢是的，是为那个部件设计的。当然，没有必要像我说的那样使用这个组件，但它使一切变得更容易，反应也更容易

onChange

在用户成功完成ReCAPTCHA时被调用，因此一旦用户成功完成，立即将禁用状态更新为false。谢谢，因此我尝试了此操作，但收到以下消息：React Hook“useCallback”无法在回调内调用。必须在React函数组件中调用React钩子。可能是因为我的表格是这样返回的吗？{props=>{const{//all my consts…}=props；return（@SkyeBoniwell发布您的所有代码。您可能正在使用“helper函数”。谢谢，好的，我添加了我的表单…我缩短了它，因为它有75个字段。谢谢！