Come impostare la messa a fuoco sull'elemento dopo il rendering con React

Introduzione

Impostando il focus su un elemento, guidiamo delicatamente un utente al campo di input successivo previsto, offrendo loro un'esperienza di navigazione migliore con meno congetture.

In questo articolo impareremo come mettere a fuoco un elemento dopo aver eseguito il rendering della nostra applicazione React o di un componente React.

Nell'HTML tradizionale, era facile impostare un elemento da mettere a fuoco usando il autofocus attributo all'interno del ns tag, che è un attributo booleano e per impostazione predefinita è impostato su false. Indica al browser di concentrarsi su quel campo di input specifico e l'utente può iniziare a inserire i valori immediatamente:

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

Questo funzionerà anche nelle nostre applicazioni React. Tuttavia, quando vogliamo mettere a fuoco un elemento dopo il rendering con un controllo più programmatico, possiamo utilizzare il useEffect() agganciare i componenti funzionali e il componentDidMount() metodo del ciclo di vita nei componenti della classe.

Come mettere a fuoco l'elemento dopo il rendering nei componenti funzionali

In precedenza, prima dell'introduzione degli hook React, non potevamo gestire operazioni come questa con i componenti funzionali.

Dall'introduzione degli hook, possiamo sapere quando la nostra applicazione/componente è stato completamente renderizzato in modo da poter eseguire azioni specifiche usando il useEffect() gancio. Abbiamo anche accesso al useRef() hook, che possiamo usare per fare riferimento direttamente a un particolare elemento.

Supponiamo di avere un modulo con due campi e di volere che uno dei campi sia messo a fuoco dopo il rendering del 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;

Iniziamo ottenendo un riferimento all'input usando il useRef() Gancio di reazione. Per fare ciò, importeremo prima useRef() da Reagire, creare a ref e imposta il suo valore su null per impostazione predefinita, quindi allega il creato ref al nostro elemento Reagire tramite il ref attributo:

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: Si noti che abbiamo allegato il riferimento creato solo a uno degli elementi di input, che è quello che vogliamo mettere a fuoco.

Procediamo ora ad utilizzare il useEffect() hook per aggiungere focus all'elemento dopo aver eseguito il rendering della nostra applicazione:

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;

Nel codice sopra, nota che abbiamo importato il file useEffect() hook e quindi ha utilizzato l'hook con un array di dipendenze vuoto ([]) per assicurarsi che si attivi solo quando il componente viene montato inizialmente. Infine, per mettere a fuoco l'elemento di riferimento, accederemo al ref tramite il current attributo e quindi allegare il focus() Metodo:

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

A questo punto, quando la nostra applicazione o componente esegue il rendering, l'elemento di riferimento verrà automaticamente focalizzato:

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;

Come impostare lo stato attivo sull'elemento dopo il rendering nei componenti della classe

Finora, abbiamo visto come mettere a fuoco un elemento con un componente funzionale, ma è una sintassi completamente diversa con i componenti di classe poiché non utilizziamo più gli hook perché funzionano solo nei componenti funzionali. Nei componenti di classe, creiamo il nostro riferimento all'interno di constructor() metodo e utilizzare il componentDidMount() metodo per impostare l'elemento di riferimento da mettere a fuoco una volta che la nostra applicazione esegue il rendering:

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;

Nel codice sopra, abbiamo usato il constructor() metodo per creare un riferimento, che abbiamo allegato all'elemento di input:

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

Abbiamo quindi utilizzato il componentDidMount() metodo del ciclo di vita, che è molto simile al useEffect() hook, per garantire che l'elemento sia messo a fuoco una volta che la nostra applicazione/componente esegue il rendering:

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

Conclusione

In questo articolo, abbiamo imparato come impostare un elemento da mettere a fuoco utilizzando un campo di input una volta che la nostra applicazione o componente esegue il rendering in entrambi i componenti Class e Functional. Entrambi i metodi sono gli stessi ma hanno una sintassi diversa poiché sono due diversi tipi di componenti.