在 Formik 表单中使用 useRef（以防止双击）禁用单击提交按钮会导致 Formik 提交中断

Question

我有一个如下所示的 Formik 表单，它在其原始实现中工作正常。我必须添加的一个额外功能是，当单击提交按钮时，我必须禁用它，以防止双击。我按照来定义按钮上的 ref={submitBtnRef} 。但是在 onClick 中插入这段代码后，Formik 不再提交，它就停止了。如果我删除这个新代码，一切正常。没有验证错误；我输出 Formik 的 errors 并且它是空的。也没有控制台错误。

const submitForm = async (formValues) => {
    const url = '/app/submitAgreement';
    let obj = {'formValues': formValues};
    await axios.post(url, obj);
}

// Define a Submit Button Ref for disabling in Submit's onClick() below
let submitBtnRef = useRef();

<Formik 
    enableReinitialize
    validationSchema={mySchema} 
    onSubmit={ (values) => {
        submitForm(values); // Calls submitForm() function if there are no errors
    }}
    initialValues={initialFormValues}
>
    {
        ({handleSubmit, handleChange, handleBlur, setFieldValue, setFieldTouched, values, touched, isValid, errors}) 
        => (

            <Form onSubmit={handleSubmit}> {/* Form starts here */}
            ..
            ..
            <Button type="submit" ref={submitBtnRef}
                    onClick={() => { 
                       // If I remove this Ref-Disable code it works, but I need to disable Submit
                       if(submitBtnRef.current) {
                          submitBtnRef.current.setAttribute("disabled", "disabled");
                       }
            
                       // The default form-submit method specified in the Formik Form, submitForm(),
                       // will now be executed if there are no validation errors
                       }} 
    >Submit</Button>                
    ..
    </Form>

Answer 1

不要直接操作 DOM。您提供的 link 已过时并且包含一些误导性信息。相反，在 JSX 中设置属性 disabled。您可以简单地使用 Formik 的 isSubmitting 值：

const submitForm = async (formValues) => {
    const url = '/app/submitAgreement';
    let obj = {'formValues': formValues};
    await axios.post(url, obj);
}

<Formik 
    enableReinitialize
    validationSchema={mySchema} 
    onSubmit={ (values) => {
        submitForm(values); // Calls submitForm() function if there are no errors
    }}
    initialValues={initialFormValues}
>
    {
        ({handleSubmit, handleChange, handleBlur, setFieldValue, setFieldTouched, values, touched, isValid, errors, isSubmitting}) 
        => (

            <Form onSubmit={handleSubmit}> {/* Form starts here */}
            ..
            ..
            <Button type="submit" disabled={isSubmitting}
    >Submit</Button>                
    ..
    </Form>

如果您希望按钮保持禁用状态：

const [isSubmitted, setIsSubmitted] = useState(false);

//...

const submitForm = async (formValues) => {
    const url = '/app/submitAgreement';
    let obj = {'formValues': formValues};
    await axios.post(url, obj);
    setIsSubmitted(true);
}

//...
<Button type="submit" disabled={isSubmitting || isSubmitted}

在 Formik 表单中使用 useRef（以防止双击）禁用单击提交按钮会导致 Formik 提交中断

Disabling Submit button on click with useRef (to prevent double clicks) inside a Formik form causes Formik submission to break

reactjs

formik