Introducción

Al establecer el foco en un elemento, guiamos suavemente al usuario al siguiente campo de entrada esperado, brindándole una mejor experiencia de navegación con menos conjeturas.

En este artículo, aprenderemos cómo establecer el foco en un elemento después de renderizar nuestra aplicación React o un componente React.

En HTML tradicional, era fácil configurar un elemento para enfocarlo usando el autofocus atributo dentro de nuestro etiqueta, que es un atributo booleano y se establece de forma predeterminada en false. Le indica al navegador que se concentre en ese campo de entrada específico, y el usuario puede comenzar a ingresar valores de inmediato:

<form>
    <input type="text" autofocus> // Will focus
    <input type="text"> // Won't focus
</form>

Esto también funcionará en nuestras aplicaciones React. Aún así, cuando queremos enfocarnos en un elemento después de renderizar con más control programático, podemos hacer uso de la useEffect() enganche los componentes funcionales y el componentDidMount() método de ciclo de vida en componentes de clase.

Cómo establecer el enfoque en el elemento después de renderizar en componentes funcionales

Anteriormente, antes de la introducción de los ganchos React, no podíamos manejar operaciones como esta con componentes funcionales.

Desde la introducción de los ganchos, podemos saber cuándo nuestra aplicación/componente se ha renderizado por completo para que podamos realizar acciones específicas usando el useEffect() gancho. También tenemos acceso a la useRef() gancho, que podemos usar para hacer referencia a un elemento en particular directamente.

Supongamos que tenemos un formulario con dos campos, y queremos que uno de los campos se establezca en foco después de que el componente se represente:

const App = () => {
    return (
        <div className='container'>
            <form>
                <input type="text" placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

Comencemos obteniendo una referencia a la entrada usando el useRef() Gancho de reacción. Para hacer esto, primero importaríamos useRef() desde React, crea un ref y establezca su valor en nulo de forma predeterminada y luego adjunte el creado ref a nuestro elemento React a través del ref atributo:

import { useRef } from 'react';

const App = () => {
    const inputReference = useRef(null);

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

Nota: Observe que solo adjuntamos la referencia creada a uno de los elementos de entrada, que es el que queremos establecer como foco.

Procedamos ahora a utilizar el useEffect() gancho para agregar foco al elemento después de renderizar nuestra aplicación:

import { useRef, useEffect } from 'react'

const App = () => {
    const inputReference = useRef(null);

    useEffect(() => {
        
    }, [])

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

En el código anterior, observe que importamos el useEffect() gancho y luego hizo uso del gancho con una matriz de dependencia vacía ([]) para asegurarse de que solo se active cuando el componente se monte inicialmente. Finalmente, para hacer foco al elemento referenciado, accederemos a la referencia a través de la current atributo y luego adjunte el focus() método:

useEffect(() => {
    inputReference.current.focus();
}, [])

En este punto, cuando nuestra aplicación o componente se renderice, el elemento al que se hace referencia se enfocará automáticamente:

import { useRef, useEffect } from 'react';

const App = () => {
    const inputReference = useRef(null);

    useEffect(() => {
        inputReference.current.focus();
    }, []);

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

Cómo establecer el enfoque en el elemento después de renderizar en componentes de clase

Hasta ahora, hemos visto cómo enfocar un elemento con un componente funcional, pero es una sintaxis completamente diferente con los componentes de clase, ya que ya no usamos ganchos porque solo funcionan en componentes funcionales. En componentes de clase, creamos nuestra referencia dentro del constructor() método y hacer uso de la componentDidMount() para configurar el elemento al que se hace referencia para que se enfoque una vez que nuestra aplicación se procesa:

import React, { Component } from 'react';

export class App extends Component {
    constructor(props) {
        super(props);
        this.inputReference = React.createRef();
    }

    componentDidMount() {
        this.inputReference.current.focus();
    }

    render() {
        return (
            <div className='container'>
                <form>
                    <input type="text" ref={this.inputReference} placeholder='This has focus' />
                    <input type="text" placeholder='No focus when we render' />
                </form>
            </div>
        )
    }
}
export default App;

En el código anterior, usamos el constructor() método para crear una referencia, que adjuntamos al elemento de entrada:

constructor(props) {
    super(props);
    this.inputReference = React.createRef();
}

Luego usamos el componentDidMount() método del ciclo de vida, que es muy similar al useEffect() gancho, para garantizar que el elemento esté enfocado una vez que nuestra aplicación/componente se represente:

componentDidMount() {
    this.inputReference.current.focus();
}

Conclusión

En este artículo, aprendimos cómo configurar un elemento para que se enfoque usando un campo de entrada una vez que nuestra aplicación o componente se presenta en los componentes de Clase y Funcional. Ambos métodos son iguales pero tienen una sintaxis diferente ya que son dos tipos diferentes de componentes.