Tengo una forma estándar en reaccionar que está construida con la forma final de reacción. Cuando el usuario hace clic en enviar, les muestro un modal actualizando el estado para revelar el modal. El modal tiene dos opciones que actualizan el estado. Quiero esperar a que se haga clic en una de las opciones antes de activar el punto final de la publicación.
Aquí está el formulario
<div> <Wrapper> <Form onSubmit={onSubmit} render={({ handleSubmit }) => ( <form onSubmit={handleSubmit} noValidate> // Fields are here <Modal isOpen={showModal} handleAcceptClick={handleAcceptClick} handleDeclineClick={handleDeclineClick} /> <Button buttonType="submit" /> </form> )} /> </Wrapper> </div>// Este es el método onSubmit
async function onSubmit(submission: Payload) { setShowModal(true); await api.create({ submission, }); } En el componente modal, hay una devolución de llamada para establecer el estado en el mismo archivo en el que se encuentra el formulario, en función de si aceptan o rechazan. ¿Cómo puedo esperar a que ocurra ese estado antes de llamar al método api.create en el envío?
HTML:
<div> <Wrapper> <Form onSubmit={onSubmit} render={({ handleSubmit }) => ( <form onSubmit={handleSubmit} noValidate> // Fields are here <Modal isOpen={showModal} handleAcceptClick={handleAcceptClick} handleDeclineClick={handleDeclineClick} /> <Button buttonType="button" onClick={confirm} /> </form> )} /> </Wrapper> </div>CÓDIGO JS:
function confirm() { setShowModal(true); } // call this function on click of one option in modal function onConfirm(){ onSubmit(); }