0
297
VistasImplementando el menú desplegable de React
Estoy creando un menú Dropdown usando React.
Pero no tengo idea de cómo implementar handleClose() .
Quiero:
- Al hacer clic en el cuerpo/cualquier cosa fuera de
<Dropdown>=>handleClose() - Al hacer clic en cualquier
<ActionMenu>=>handleClose() - Hacer clic en cualquier elemento secundario dentro del
<ActionMenu>=>handleClose()si no se llamó apreventDefault() - Al hacer clic en cualquier
<ActionMenu enabled={false}>=> no hacer nada - Al hacer clic en cualquier niño dentro del
<ActionMenu enabled={false}>=> no hacer nada - Al hacer clic en cualquier niño discapacitado dentro del
<ActionMenu>=> no hacer nada - Al hacer clic en cualquier
<NonActionMenu>=> no hacer nada - Al hacer clic en cualquier niño dentro del
<NonActionMenu>=> no hacer nada -
<Dropdown>perdió el foco (onBlur=) porque un elemento fuera del menú desplegable obtuvo el foco =>handleClose() -
<Dropdown>perdió el foco (onBlur=) porque un elemento dentro del menú desplegable se centró => no hacer nada
La implementación <Dropdown onBlur={() => handleClose()} ...> funciona para el punto 9 pero falló para el punto 10.
¿Puedes sugerir tu idea?
No tengo sandbox porque el proyecto es bastante complejo.
Pero puedes bifurcar y modificar aquí: mi proyecto
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Para el clic, puede agregar un detector de eventos al objeto de la ventana para encargarse de cualquier clic fuera del contenedor desplegable. También puede modificar esto para la tecla enter:
window.addEventListener('click', function(e) { const dropDownWrapper = document.querySelector('#id of dropdown wrapper'); const path = e.path || (e.composedPath && e.composedPath()); if (!path.some(x => !(x instanceof SVGElement) && x.id && x.id === '#id of dropdown wrapper')) { dropDownWrapper.querySelector('.class of dropdownlist') ? x.querySelector('.class of dropdownlist').style.display = 'none' : null } else{ dropDownWrapper.querySelector('.class of dropdownlist') ? x.querySelector('.class of dropdownlist').style.display = 'block' : null } }, true);
·
Juan Pablo Isaza
Denunciar
Responde la pregunta