Trabajando con los Modales de Bootstrap en Reacción

El modal viene con algunos eventos útiles para ayudarnos con los estados intermedios entre esconder y mostrar el modal. Por ejemplo, si quieres mostrar un contenido diferente en tu modal, en la página principal mientras se carga a la vista, o en el proceso de ocultar, entonces puedes utilizar las devoluciones de llamada onEnter, onEntered, onExit o onExited respectivamente. Veamos estas devoluciones de llamada individualmente en mayor profundidad.

onEntered

El evento «onEntered» recibe una llamada que se disparará una vez que el modal haya terminado de aparecer. Esto es útil si queremos cargar datos asincrónicamente en el modal, o interactuar con los elementos una vez que son visibles en el modal. En este ejemplo, vamos a actualizar el título de nuestro modal de Transición… a Modal Listo.

123456789101112131415161718192021222324252627282930313233constApp=()=>{const[isOpen, setIsOpen]=React.useState(false);const[title, setTitle]=React. useState("Transitioning…");constshowModal=()=>{setIsOpen(true);};consthideModal=()=>{setIsOpen(false);setTitle("Transitioning. .. ");};constmodalLoaded=()=>{setTitle("Modal Ready");};return(<><botón deClick={showModal}& gt;DisplayModal</botón><Modal show={isOpen} onHide={hideModal} onEntered={modalLoaded}><Modal. Header><Modal.Título>{título}</Modal.Título></Modal.Header><Modal.Cuerpo>El cuerpo</Modal.Cuerpo><Modal. Pie><Botón enClick={hideModal}>Cancelar</botón><botón>Guardar</botón></Modal. Botón></Modal></>);};</pre
js

onEnter

En este ejemplo, nosotros' iniciaremos un temporizador para contar el tiempo que tarda en abrirse el modal en milisegundos. We'mostrará en el cuerpo del modal'cuanto tiempo le toma a la llamada de onEnter para obtener el comando para empezar a abrir el modal a cuando termine de abrirlo.

1234567891011121314151617181920212223242526272829303132333435363738394041424344constApp=()=>{const[isOpen, setIsOpen]=Reaccionar. useState(false);const[timer, setTimer]=Reaccionar.useState(0);const[startTime, setStartTime]=Reaccionar.useState(0);const[endTime, setEndTime]=Reaccionar. useState(0);constshowModal=()=>{setIsOpen(true);};consthideModal=()=>{setIsOpen(false);setTitle("Transitioning. ..");};conststartTimer=()=>{setStartTime(Date.now());};constmodalLoaded=()=>{setEndTime(Date. now());};return(<><botón onClick={showModal}>DisplayModal</botón><Modal show={isOpen} onHide={hideModal} onEnter={startTimer} onEntered={modalLoaded}><Modal. Header><Modal.Título>{título}</Modal.Título></Modal. Header><Modal.Body>{endTime – startTime} ms</Modal.Body><Modal. Footer><Botón enClick={hideModal}>Cancelar</botón><botón>Guardar</botón></Modal. Botón></Modal></>);};</pre
js

onExit y onExited

Podemos utilizar de manera similar las llamadas onExit y onExited para manejar las interacciones de la página durante la transición. Let's show a 'adiós' mensaje cuando el usuario cierra el modal. We'también cambiará el fondo de la página cuando el modal termine de salir.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455constApp=()=;{const[isOpen, setIsOpen]=React. useState(false);const[timer, setTimer]=Reaccionar.useState(0);const[startTime, setStartTime]=Reaccionar.useState(0);const[endTime, setEndTime]=Reaccionar. useState(0);constshowModal=()= &gt {setIsOpen(true);setTitle("Modal Ready");document.body.style.backgroundColor="white";};consthideModal=()=>{setIsOpen(false);};conststartTimer=()=>{setStartTime(Date. now());};constmodalLoaded=()= ;{setEndTime(Date.now());};constonExit=()=mphmph;{setTitle("Goodbye  ");};constonExited=()=mph;{documento. body.style.backgroundColor="verde";};return(<<};botón onClick={showModal};DisplayModal</button=;<Modal show={isOpen} onHide={hideModal} onEnter={startTimer} onEntered={modalLoaded} onExit={onExit} onExited={onExited};<Modal.Header Título};{título}</Título.Modal. Pie de página...; botón enClick={hideModal};};Cancel</botón...;};

js