代码之家 › 专栏 › 技术社区 › gene b.

在Formik表单中禁用点击提交按钮(防止双击)会导致Formik提交中断

formik reactjs

gene b. · 技术社区 · 5 年前

我有一个如下的Formik表单,它在最初的实现中运行正常。我必须添加的一个额外功能是,当单击Submit按钮时,我必须禁用它,以防止双击。我跟着火车走 example here 也就是定义一个 ref={submitBtnRef} 在按钮上。但是在把这个代码插入 onClick ,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>

0 回复 | 直到 5 年前

Ro Milton 5 年前

不要直接操纵DOM。你提供的链接已经过时,并且有一些误导性的信息。相反,设置属性 disabled 在JSX中。你可以简单地使用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}