Como definir o foco no elemento após a renderização com o React

Introdução

Ao definir o foco em um elemento, orientamos suavemente o usuário para o próximo campo de entrada esperado, proporcionando uma melhor experiência de navegação com menos suposições.

Neste artigo, aprenderemos como definir o foco em um elemento após renderizar nosso aplicativo React ou um componente React.

No HTML tradicional, era fácil definir um elemento para focar usando o autofocus atributo dentro do nosso tag, que é um atributo booleano e, por padrão, é definido como false. Ele instrui o navegador a se concentrar nesse campo de entrada específico e o usuário pode começar a inserir valores imediatamente:

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

Isso também funcionará em nossos aplicativos React. Ainda assim, quando queremos definir o foco em um elemento após a renderização com mais controle programático - podemos fazer uso do useEffect() gancho em componentes funcionais e o componentDidMount() método de ciclo de vida em componentes de classe.

Como definir o foco no elemento após a renderização em componentes funcionais

Anteriormente, antes da introdução dos ganchos do React, não podíamos lidar com operações como essa com componentes funcionais.

Desde a introdução dos ganchos, podemos saber quando nosso aplicativo/componente foi totalmente renderizado para que possamos executar ações específicas usando o useEffect() gancho. Também temos acesso ao useRef() hook, que podemos usar para referenciar um determinado elemento diretamente.

Suponha que temos um formulário com dois campos e queremos que um dos campos seja definido em foco após a renderização do componente:

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;

Vamos começar obtendo uma referência à entrada usando o useRef() Reaja gancho. Para fazer isso, primeiro importaríamos useRef() do React, crie um ref e defina seu valor como null por padrão e, em seguida, anexe o criado ref ao nosso elemento React através do 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;

Observação: Observe que apenas anexamos a referência criada a um dos elementos de entrada, que é aquele que queremos definir como foco.

Vamos agora usar o useEffect() hook para adicionar foco ao elemento após renderizar nosso aplicativo:

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;

No código acima, observe que importamos o useEffect() gancho e, em seguida, fez uso do gancho com uma matriz de dependência vazia ([]) para garantir que ele seja acionado apenas quando o componente for montado inicialmente. Por fim, para focar o elemento referenciado, acessaremos o ref através do current atributo e, em seguida, anexe o focus() método:

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

Neste ponto, quando nosso aplicativo ou componente for renderizado, o elemento referenciado será automaticamente focado:

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;

Como definir o foco no elemento após a renderização em componentes de classe

Até agora, vimos como definir o foco em um elemento com um componente funcional, mas é uma sintaxe totalmente diferente com componentes de classe, pois não fazemos mais uso de ganchos porque eles funcionam apenas em componentes funcionais. Em componentes de classe, criamos nosso ref dentro do constructor() método e fazer uso do componentDidMount() método para definir o elemento referenciado para focar assim que nosso aplicativo renderizar:

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;

No código acima, usamos o constructor() método para criar uma referência, que anexamos ao elemento de entrada:

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

Em seguida, usamos o componentDidMount() método de ciclo de vida, que é muito semelhante ao useEffect() hook, para garantir que o elemento seja definido em foco assim que nosso aplicativo/componente renderizar:

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

Conclusão

Neste artigo, aprendemos como definir um elemento para focar usando um campo de entrada quando nosso aplicativo ou componente for renderizado nos componentes Class e Functional. Ambos os métodos são iguais, mas têm sintaxe diferente, pois são dois tipos diferentes de componentes.