Hice una ventana modal en React. Creé un estado llamado modalbool e hice aparecer la ventana modal cuando modalbool es verdadero. Y creé un componente principal llamado Fondo y cerré la ventana modal cuando hice clic en Fondo. Sin embargo, incluso si hago clic en el componente ModalContainer, que es un componente secundario, se ejecuta modalClosefunc y se cierra la ventana modal. ¿Cómo puedo hacer que modalbool se vuelva falso y cerrar la ventana modal cuando solo se presiona el componente Fondo?
este es mi codigo
const Backdrop = styled.div` display: flex; align-items: center; justify-content: center; position: absolute; top:0; left: 0; background-color: rgba(0,0,0,0.7); width: 100vw; height: 100vh; ` const ModalContainer = styled.div` position: relative; width: 700px; height: 600px; background-color: lightcoral; `; const [modalbool, setModalbool] = useState(false); {modalbool ? ( <Backdrop onClick={modalClosefunc}> <ModalContainer> </ModalContainer> </Backdrop> ) : nullLa solución rápida y complicada es ajustar el índice z para el css de los componentes. Si modalbool es verdadero, establezca el índice z del modal en un número alto y reinícielo a la línea de base una vez que haya hecho clic fuera del cuadro.
También puede optar por adjuntar un controlador de clics en el propio modal y escribir la lógica en consecuencia. (Un caso de uso podría ser que este controlador adjunte o elimine un detector de eventos para un evento de mouseover en el modal y lo cierre una vez que el mouse salga del modal)
¡Espero que esto ayude!
Agregue un evento de clic a ModalContainer para stopPropagation