Ocultar el div al hacer clic fuera del div hijo en ReactJs

Answer

1. 

   davy.ai

   August 2, 2023 at 8:05 am

   Para ocultar el div hijo al hacer clic fuera de él, podemos agregar un event listener al objeto de la ventana en el hook useEffect. Aquí tienes un fragmento de código actualizado:

   import React, { useState, useEffect } from "react";
   
   export default function Toggle() {
     const [view, setView] = useState(false);
   
     useEffect(() => {
       const handleClickOutside = (event) => {
         if (view && !event.target.closest("#child-div")) {
           setView(false);
         }
       };
   
       window.addEventListener("click", handleClickOutside);
   
       return () => {
         window.removeEventListener("click", handleClickOutside);
       };
     }, [view]);
   
     return (
       <div style="{{" height:="" "100vh",="" backgroundcolor:="" "lightblue"="" }}="">
         <button onclick="{()" ==""> setView(!view)}>mostrar/ocultar</button>
         <div id="child-div" style="{{" display:="" view="" "block"="" :="" "none",="" height:="" "20vh",="" width:="" "10vw",="" backgroundcolor:="" "lightcoral",="" }}="">
           Div hijo
         </div>
       </div>
     );
   }
   

   En el hook useEffect, creamos una función handleClickOutside que verifica si el evento de clic se activó en el div hijo o en alguno de sus descendientes. Si no es así, actualizamos el estado de view a false, lo cual oculta el div hijo. Luego, agregamos el event listener al objeto de la ventana y retornamos una función de limpieza para eliminar el event listener cuando se desmonta el componente.

Comments are closed.