Comment définir le focus sur l'élément après le rendu avec React

Introduction

En mettant l'accent sur un élément, nous guidons doucement un utilisateur vers le prochain champ de saisie attendu, lui offrant une meilleure expérience de navigation avec moins de conjectures.

Dans cet article, nous apprendrons comment définir le focus sur un élément après le rendu de notre application React ou d'un composant React.

En HTML traditionnel, il était facile de définir un élément sur lequel se concentrer à l'aide de la autofocus attribut au sein de notre tag, qui est un attribut booléen et est défini par défaut sur false. Il demande au navigateur de se concentrer sur ce champ de saisie spécifique, et l'utilisateur peut commencer à saisir des valeurs immédiatement :

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

Cela fonctionnera également dans nos applications React. Pourtant, lorsque nous voulons mettre l'accent sur un élément après le rendu avec un contrôle plus programmatique - nous pouvons utiliser le useEffect() crochet dans les composants fonctionnels et le componentDidMount() méthode de cycle de vie dans les composants de classe.

Comment définir le focus sur l'élément après le rendu dans les composants fonctionnels

Auparavant, avant l'introduction des crochets React, nous ne pouvions pas gérer de telles opérations avec des composants fonctionnels.

Depuis l'introduction des crochets, nous pouvons savoir quand notre application/composant est entièrement rendu afin que nous puissions effectuer des actions spécifiques en utilisant le useEffect() accrocher. Nous avons également accès au useRef() crochet, que nous pouvons utiliser pour référencer directement un élément particulier.

Supposons que nous ayons un formulaire avec deux champs et que nous souhaitions que l'un des champs soit mis en évidence après le rendu du composant :

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;

Commençons par obtenir une référence à l'entrée en utilisant le useRef() Crochet de réaction. Pour ce faire, nous importerions d'abord useRef() à partir de React, créez un ref et définissez sa valeur sur null par défaut puis joignez le créé ref à notre élément React via le ref attribut:

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;

Remarque: Notez que nous n'avons attaché la référence créée qu'à l'un des éléments d'entrée, qui est celui que nous voulons définir comme focus.

Passons maintenant à l'utilisation du useEffect() crochet pour ajouter le focus à l'élément après le rendu de notre application :

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;

Dans le code ci-dessus, notez que nous avons importé le useEffect() crochet puis utilisé le crochet avec un tableau de dépendances vide ([]) pour s'assurer qu'il ne se déclenche que lors du montage initial du composant. Enfin, pour faire le focus sur l'élément référencé, nous allons accéder à la ref via le current attribut, puis joignez le focus() méthode:

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

À ce stade, lors du rendu de notre application ou composant, l'élément référencé sera automatiquement focalisé :

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;

Comment définir le focus sur l'élément après le rendu dans les composants de classe

Jusqu'à présent, nous avons vu comment mettre l'accent sur un élément avec un composant fonctionnel, mais c'est une syntaxe entièrement différente avec les composants de classe car nous n'utilisons plus les crochets car ils ne fonctionnent que dans les composants fonctionnels. Dans les composants de classe, nous créons notre ref dans le constructor() méthode et utiliser la componentDidMount() méthode pour définir l'élément référencé sur le focus une fois que notre application s'affiche :

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;

Dans le code ci-dessus, nous avons utilisé le constructor() méthode pour créer une référence, que nous avons attachée à l'élément d'entrée :

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

Nous avons ensuite utilisé le componentDidMount() méthode du cycle de vie, qui est très similaire à la useEffect() crochet, pour s'assurer que l'élément est mis au point une fois que notre application/composant s'affiche :

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

Conclusion

Dans cet article, nous avons appris comment définir un élément pour qu'il se concentre à l'aide d'un champ de saisie une fois que notre application ou composant s'affiche à la fois dans les composants Class et Functional. Les deux méthodes sont identiques mais ont une syntaxe différente puisqu'il s'agit de deux types de composants différents.