Tengo un componente principal que contiene varios componentes secundarios desplegables. El estado se administra dentro del componente principal para mostrar solo un menú desplegable a la vez. Actualmente tengo una parte funcionando, pero tengo algunos problemas para comprender la lógica para que cuando haga clic fuera de un menú desplegable si está abierto, se cerrará el menú desplegable. Intenté usar useRef hook para detectar clics externos, pero sigo teniendo problemas para entender la lógica para que las cosas se muestren correctamente.
const MultipleDropdownPage = () => { const [dropdown, setDropdown] = useState(null); const handleDropdown = id => { if (dropdown === id) { setDropdown(null); } if (dropdown !== id) { setDropdown(id); } }; return ( <div> {dropdown ? dropdown : 'Nothing'} <Dropdown handleDropdown={handleDropdown} dropdown={dropdown} id='1' /> <Dropdown handleDropdown={handleDropdown} dropdown={dropdown} id='2' /> </div> ); }; import React from 'react'; const Dropdown = ({ handleDropdown, id, dropdown }) => { return ( <div> <button onClick={() => handleDropdown(id)}>Click me</button> {id === dropdown && ( <div className='dropdown'> <ul> <li>Lorem, ipsum.</li> <li>Dolore, eligendi.</li> <li>Quam, itaque!</li> </ul> </div> )} </div> ); }; export default Dropdown;Necesario para establecer una clase en el botón en sí y luego verificar si cuando se hace clic en el documento no coincide con esa clase de botón
import React, { useRef, useEffect } from 'react'; const Dropdown = ({ handleDropdown, id, dropdown }) => { const ref = useRef(); useEffect(() => { const handleClick = e => { if (!e.target.classList.contains('dropdown-toggle')) { handleDropdown(null); } }; document.addEventListener('click', handleClick); return () => document.removeEventListener('click', handleClick); }, [handleDropdown]); return ( <> <button onClick={() => handleDropdown(id)} ref={ref} className='dropdown-toggle' > Click me </button> {id === dropdown && ( <div className='dropdown'> <ul> <li>Lorem, ipsum.</li> <li>Dolore, eligendi.</li> <li>Quam, itaque!</li> </ul> </div> )} </> ); }; export default Dropdown;Esta solución aprovecha el atributo data-* de HTML personalizado.
const MultipleDropdownPage = (props) => { const [dropdown, setDropdown] = React.useState(null); const handleDropdown = id => { if (dropdown === id || dropdown && id == undefined) { setDropdown(null); } if (dropdown !== id) { setDropdown(id); } }; React.useEffect(() => { const handleClick = ({target}) => { handleDropdown(target.dataset.id); }; document.addEventListener("click", handleClick); return () => document.removeEventListener("click", handleClick) }, [handleDropdown]); return ( <div className="dropdown-container"> {dropdown ? dropdown : 'Nothing'} <Dropdown dropdown={dropdown} id='1' /> <Dropdown dropdown={dropdown} id='2' /> </div> ); }; const Dropdown = ({ id, dropdown }) => { return ( <div> <button data-id={id}>Click me</button> {id === dropdown && ( <div className='dropdown'> <ul> <li>Lorem, ipsum.</li> <li>Dolore, eligendi.</li> <li>Quam, itaque!</li> </ul> </div> )} </div> ); }; ReactDOM.render(<MultipleDropdownPage />, document.getElementById("root")); .dropdown-container { padding: 5px; border: 2px solid red; width: fit-content; margin: 0 auto; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>