我有一个如下的Formik表单，它在最初的实现中工作正常。我必须添加的一个额外功能是，当单击Submit按钮时，我必须禁用它，以防止双击。我遵循这里的示例，在按钮上定义ref={submitBtnRef}。但是在点击onClick插入此代码后，Formik不再提交，它只是停止。如果我删除这段新代码，一切都会正常工作。没有验证错误；我输出Formik的错误，它是空的。也没有控制台错误。
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>
不要直接操纵DOM。您提供的链接已经过时，并且有一些误导性信息。相反，在JSX中设置属性禁用。您可以简单地使用Formik的isSubging值：
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}
