Desafío de Programación: Pregunta 16. En este reto crearemos un hook useFocus que permite que un elemento padre detecte si el foco está dentro de alguno de sus descendientes y, en función de ello, realizar un render condicional.
Paso 1 crear la referencia y el estado. Usamos useRef para obtener el nodo y useState para mantener si hay foco o no. Ejemplo en TypeScript texto plano: const ref = useRef<T>(null); const [isFocused, setIsFocused] = useState(false)
Paso 2 en un useEffect obtener el nodo actual y si no existe devolver sin hacer nada. const node = ref.current if (!node) return
Paso 3 definir los manejadores de evento. Cuando el foco entra en el contenedor o en cualquiera de sus descendientes se marca isFocused en true. const handleFocusIn = () => setIsFocused(true)
Paso 4 cuando el foco sale del contenedor comprobamos event.relatedTarget para saber si el foco se trasladó fuera del contenedor y entonces ponemos isFocused en false. const handleFocusOut = (e: FocusEvent) => { if (node && !node.contains(e.relatedTarget as Node)) { setIsFocused(false) } }
Paso 5 añadir listeners al nodo para los eventos focusin y focusout y limpiar en el return del efecto. node.addEventListener("focusin", handleFocusIn) node.addEventListener("focusout", handleFocusOut) return () => { node.removeEventListener("focusin", handleFocusIn) node.removeEventListener("focusout", handleFocusOut) }
Código final de ejemplo en TypeScript mostrado como texto con entidades para los signos menor y mayor: import React, { useRef, useEffect, useState, Ref } from react export function useFocus<T extends HTMLElement>(): [Ref<T>, boolean] { const ref = useRef<T>(null); const [isFocused, setIsFocused] = useState(false); useEffect(() => { const node = ref.current if (!node) return const handleFocusIn = () => setIsFocused(true); const handleFocusOut = (e: FocusEvent) => { if (node && !node.contains(e.relatedTarget as Node)) { setIsFocused(false) } } node.addEventListener("focusin", handleFocusIn) node.addEventListener("focusout", handleFocusOut) return () => { node.removeEventListener("focusin", handleFocusIn) node.removeEventListener("focusout", handleFocusOut) } }, [ref.current]) return [ref, isFocused] }
Ejemplo de uso en un componente App texto plano: export function App() { const [ref, isFocused] = useFocus<HTMLDivElement>() return <div ref={ref}> <input placeholder=Primer Input /> <input placeholder=Segundo Input /> {isFocused && <p>focused</p>} </div> }
Consejos prácticos y buenas prácticas: usar focusin y focusout porque burbujean y permiten detectar cambios de foco dentro del contenedor sin tener que asignar listeners a cada descendiente. Asegurarse de limpiar los listeners para evitar fugas de memoria y declarar correctamente las dependencias del useEffect para que el listener se vuelva a registrar solo cuando cambie el nodo.
Sobre Q2BSTUDIO: Si buscas socios expertos en desarrollo de software a medida, aplicaciones a medida, inteligencia artificial o ciberseguridad, en Q2BSTUDIO ofrecemos soluciones integrales para empresas. Somos especialistas en software a medida y en la creación de aplicaciones adaptadas a procesos y necesidades específicas. También desarrollamos proyectos de inteligencia artificial para empresas y agentes IA y ofrecemos servicios de seguridad y pentesting para proteger tus activos digitales.
Puedes conocer nuestros servicios de desarrollo de aplicaciones y software a medida en desarrollo de aplicaciones y software multiplataforma y explorar nuestras soluciones de inteligencia artificial en IA para empresas y agentes IA. Además contamos con servicios cloud aws y azure, servicios inteligencia de negocio y soluciones con power bi para potenciar el reporting y la analítica.
Palabras clave relevantes para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi. Si deseas que en Q2BSTUDIO adaptemos este hook a un proyecto real o lo integremos en una aplicación con integración en la nube o inteligencia de negocio, nuestro equipo puede ayudarte a implementarlo de forma robusta y segura.
Resumen final: el hook useFocus permite al componente padre saber si el foco está en cualquiera de sus descendientes usando una ref y listeners de focusin y focusout. Es una solución elegante para control de estado de foco en componentes complejos y puede integrarse fácilmente en proyectos de software a medida o en proyectos que usen inteligencia artificial y servicios cloud gestionados por Q2BSTUDIO.
.jpg)