Estoy atascado en un problema,
Creé una tabla personalizada , en cada td de la fila de la tabla tiene un botón de acción , onclick() de acción abre un pequeño menú .
Pero nunca cierra el menú abierto anterior , de hecho, abre el menú múltiple .
Cómo cerrar anterior y abrir solo un menú .
Aquí está el código, que puede ayudarle:
import React, { useRef, useEffect, useState } from "react"; export default function App() { const clickOutside = useRef(null); const [showHideMenu, setShowHideMenu] = useState(false); const handleClickOutside = (event, ref) => { if (ref.current && !ref.current.contains(event.target)) { if (showHideMenu) setShowHideMenu(!showHideMenu); } }; useEffect(() => { document.addEventListener("mousedown", (event) => handleClickOutside(event, clickOutside) ); return () => { document.removeEventListener("mousedown", handleClickOutside); }; }); return ( <div ref={clickOutside}> <h1>Hello CodeSandbox</h1> <button onClick={() => setShowHideMenu(!showHideMenu)}>Show Hide</button> <button onClick={() => setShowHideMenu(!showHideMenu)}>Show Hide</button> <button onClick={() => setShowHideMenu(!showHideMenu)}>Show Hide</button> <div>{showHideMenu ? "show" : "hide"}</div> </div> ); }En realidad, este código funciona como quieres. Cada vez que haga clic fuera de su botón, se cerrarán automáticamente todas las demás ventanas emergentes.
Aquí está el código sandbox: