Kako nastaviti fokus na element po upodabljanju z React

Predstavitev

Z nastavitvijo fokusa na element uporabnika nežno vodimo do naslednjega pričakovanega vnosnega polja, kar mu omogoča boljšo izkušnjo brskanja z manj ugibanja.

V tem članku se bomo naučili, kako nastaviti fokus na element po upodabljanju naše aplikacije React ali komponente React.

V tradicionalnem HTML-ju je bilo preprosto nastaviti element, na katerega želite biti fokusirani, z uporabo autofocus atribut znotraj našega oznaka, ki je logični atribut in je privzeto nastavljen na false. Brskalniku naroči, naj se osredotoči na to specifično vnosno polje, in uporabnik lahko takoj začne vnašati vrednosti:

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

To bo delovalo tudi v naših aplikacijah React. Kljub temu, ko želimo nastaviti fokus na element po upodabljanju z bolj programskim nadzorom, lahko uporabimo useEffect() kavelj v funkcionalnih komponentah in componentDidMount() metoda življenjskega cikla v komponentah razreda.

Kako nastaviti fokus na element po upodabljanju v funkcionalnih komponentah

Prej, pred uvedbo kavljev React, nismo mogli obravnavati takšnih operacij s funkcionalnimi komponentami.

Od uvedbe kavljev lahko vemo, kdaj je naša aplikacija/komponenta v celoti upodobljena, tako da lahko izvedemo določena dejanja z useEffect() kavelj. Imamo tudi dostop do useRef() kavelj, ki ga lahko uporabimo za neposredno sklicevanje na določen element.

Recimo, da imamo obrazec z dvema poljema in želimo, da je eno od polj v fokusu, potem ko se komponenta upodobi:

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;

Začnimo s sklicevanjem na vnos z uporabo useRef() React hook. Da bi to naredili, bi najprej uvozili useRef() iz React ustvarite a ref in privzeto nastavite njegovo vrednost na nič, nato pa priložite ustvarjeno ref na naš element React prek ref atribut:

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;

Opomba: Upoštevajte, da smo ustvarjeno referenco priložili le enemu od vhodnih elementov, ki je tisti, ki ga želimo nastaviti za fokus.

Nadaljujmo z uporabo useEffect() kavelj za dodajanje fokusa elementu po upodabljanju naše aplikacije:

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;

V zgornji kodi opazite, da smo uvozili useEffect() kavelj in nato uporabil kavelj s praznim nizom odvisnosti ([]), da zagotovite, da se sproži le, ko je komponenta prvotno nameščena. Nazadnje, da se referenčni element osredotoči, bomo do ref dostopali prek current in nato priložite focus() metoda:

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

Na tej točki, ko se naša aplikacija ali komponenta upodablja, bo referenčni element samodejno fokusiran:

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;

Kako nastaviti fokus na element po upodabljanju v komponentah razreda

Doslej smo videli, kako postaviti fokus na element s funkcionalno komponento, vendar je to popolnoma drugačna sintaksa s komponentami razreda, saj ne uporabljamo več kavljev, ker delujejo samo v funkcionalnih komponentah. V komponentah razreda ustvarimo svoj ref znotraj constructor() metodo in uporabite componentDidMount() metoda za nastavitev referenčnega elementa v fokus, ko se naša aplikacija upodobi:

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;

V zgornji kodi smo uporabili constructor() metoda za ustvarjanje reference, ki smo jo pripeli vhodnemu elementu:

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

Nato smo uporabili componentDidMount() metoda življenjskega cikla, ki je zelo podobna useEffect() kavelj, da zagotovimo, da je element nastavljen na fokus, ko se naša aplikacija/komponenta upodablja:

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

zaključek

V tem članku smo se naučili, kako nastaviti fokus elementa z uporabo vnosnega polja, ko se naša aplikacija ali komponenta upodablja tako v komponentah razreda kot v funkcijski komponenti. Obe metodi sta enaki, vendar imata različno sintakso, saj gre za dve različni vrsti komponent.