Cómo hacer focus a un elemento textarea en React
En React, establecer el foco en un elemento <textarea> es una tarea común, especialmente en formularios dinámicos. Esto se puede lograr utilizando referencias (refs) proporcionadas por React para interactuar directamente con el DOM.
Usar useRef para manejar el foco
El hook useRef es ideal para guardar una referencia a un elemento DOM y manipularlo sin desencadenar una nueva renderización.
Ejemplo básico
A continuación, se muestra un ejemplo básico de cómo establecer el foco en un <textarea> cuando se carga un componente:
import React, { useRef, useEffect } from 'react';
const FocusTextarea = () => {
const textareaRef = useRef(null); // Crear una referencia
useEffect(() => {
textareaRef.current.focus(); // Establecer el foco cuando se monta el componente
}, []);
return (
<div>
<textarea ref={textareaRef} placeholder="Escribe algo aquí..."></textarea>
</div>
);
};
export default FocusTextarea;Hacer foco con un botón
Si deseas hacer foco en el <textarea> tras un evento, como un clic en un botón, el enfoque es similar:
import React, { useRef } from 'react';
const FocusButton = () => {
const textareaRef = useRef(null);
const handleFocus = () => {
textareaRef.current.focus(); // Establecer el foco cuando se hace clic en el botón
};
return (
<div>
<textarea ref={textareaRef} placeholder="Haz clic en el botón para enfocar"></textarea>
<button onClick={handleFocus}>Enfocar textarea</button>
</div>
);
};
export default FocusButton;Explicación del código
1. useRef: Se utiliza para crear una referencia al elemento <textarea>.
2. .current: Propiedad del ref que apunta al elemento DOM.
3. focus(): Método nativo de JavaScript para establecer el foco en un elemento HTML.
Consideraciones adicionales
- Control del foco dinámico: Si necesitas controlar dinámicamente cuándo enfocar, puedes integrar la lógica con un estado de React.
- Accesibilidad: Asegúrate de que el uso del foco manual no afecte negativamente a la navegación accesible en tu aplicación.
Referencia
Para más detalles sobre el manejo de referencias, consulta la documentación oficial de React:
Jorge García
Fullstack developer