Estoy tratando de construir un modal en reaccionar. Cuando se abre, el fondo o el color del cuerpo debe cambiar a uno más oscuro y el modal debe abrirse, cuando se cierra, todo debe volver a la normalidad. Traté de lograr esto por este método:
const [modalState, setModalState] = useState(false); const [modalBg, setModalbg] = useState(false); function handleClick() { setModalState(true); setModalbg(true); } return ( { !modalState ? null : <Modal modalState = {setModalState}/> } { !modalBg ? document.body.style.backgoundColor = "ffff" : document.body.style.backgoundColor = 'rgba(39, 38, 38, 0.616)' } <button onClick= {handleClick}>Open</button> )El problema es que, en lugar de cambiar el color del cuerpo, solo muestra texto en la página como '#fff' o 'rojo'. No sé por qué sucede eso, ¿alguien puede ayudar?
¡Gracias!
Su forma no es realmente la forma "Reaccionar" de manejar modales. En primer lugar, no puedo enfatizar lo suficiente el uso de portales al crear modales. Busque esto para comprender realmente qué son los portales y cómo lo ayudan.
Continuando, puede crear un componente modal como se muestra a continuación y activar este componente como desee, utilizando un estado. Solo asegúrese de pasar el setter de ese estado al componente como accesorio, en mi caso setShowModal .
El fondo de tu modal está contenido en el div my-modal-container y puedes cambiarlo como quieras.
import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; const MyModal = ({setShowModal}) => { const handleClose = () => { setShowModal(false) }; return ReactDOM.createPortal( <div className='my-modal-container'> <div class='my-modal-body'> //Place all you modal body here </div> </div>, document.getElementById('portal') ); }; export default MyModal; Si elige usar portales como se indicó anteriormente, asegúrese de agregar <div id="portal"></div> en su archivo index.html justo debajo de <div id="root"></div> .
No debe establecer el color de fondo del cuerpo en la función de retorno. Eso está destinado a devolver el JSX.
Intente usar un gancho useEffect algo como:
useEffect(() => { if (modalBg) { document.body.style.backgoundColor = "rgba(39, 38, 38, 0.616)"; } else { document.body.style.backgoundColor = "ffff"; } }, [modalBg]);