Beim Absenden des Formulars mit formik konnte der Ladestatus nicht abgerufen werden ⇐ JavaScript

[Guest]

Ich habe eine Formularkomponente, die ein Eingabefeld vom Typ Nummer und eine Schaltfläche enthält. Ich verwende Formik, um den Status des Formulars zu verwalten. Die Formularkomponente enthält ein Modal, das geöffnet wird, wenn ich auf die Schaltfläche „Senden“ klicke.
Das Problem, mit dem ich konfrontiert bin, besteht darin, dass es innerhalb des Modals eine weitere Schaltfläche vom Typ „Senden“ gibt. Durch Klicken auf diese Schaltfläche wird das Formular gesendet, aber ich kann über Formik nicht auf den Status „isSubmitting“ zugreifen.

Code: Select all

import React, { useState, useMemo } from "react";
import { Formik, Form, Field } from "formik";

const FormWithModal = () => {
const [isModalOpen, setModalOpen] = useState(false);

const Modal = useMemo(() => {
if (!isModalOpen) return null;

return (


Modal
The form has been submitted!


);
}, [isModalOpen]);

return (

Form with Modal
 {
setSubmitting(true);
// Simulate API call or other async operation
await new Promise((resolve) => setTimeout(resolve, 1000));
setModalOpen(true);
setSubmitting(false);
}}
>
{({ isSubmitting }) => (


Number:



Submit

{Modal}

)}


);
};

export default FormWithModal;