Hvordan sette fokus på element etter gjengivelse med React

Introduksjon

Ved å sette fokus på et element, veileder vi en bruker forsiktig til neste forventede inndatafelt, og gir dem en bedre nettleseropplevelse med mindre gjetting.

I denne artikkelen vil vi lære hvordan du setter fokus på et element etter å ha gjengitt vår React-applikasjon eller en React-komponent.

I tradisjonell HTML var det enkelt å sette et element til å fokusere ved å bruke autofocus attributt innenfor vår tag, som er et boolsk attributt og som standard er satt til false. Den instruerer nettleseren til å fokusere på det spesifikke inndatafeltet, og brukeren kan begynne å skrive inn verdier umiddelbart:

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

Dette kommer til å fungere i våre React-applikasjoner også. Likevel, når vi ønsker å sette fokus på et element etter gjengivelse med mer programmatisk kontroll – kan vi benytte oss av useEffect() hekte inn funksjonelle komponenter og componentDidMount() livssyklusmetode i klassekomponenter.

Hvordan sette fokus på element etter gjengivelse i funksjonelle komponenter

Tidligere, før introduksjonen av React-kroker, kunne vi ikke håndtere operasjoner som dette med funksjonelle komponenter.

Siden introduksjonen av kroker, kan vi vite når applikasjonen/komponenten vår er fullstendig gjengitt, slik at vi kan utføre spesifikke handlinger ved å bruke useEffect() krok. Vi har også tilgang til useRef() krok, som vi kan bruke til å referere til et bestemt element direkte.

Anta at vi har et skjema med to felt, og vi vil at ett av feltene skal settes på fokus etter at komponenten gjengir:

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;

La oss komme i gang med å få en referanse til innspillet ved å bruke useRef() Reagerkrok. For å gjøre dette, ville vi først importere useRef() fra React, lag en ref og sett verdien til null som standard, og legg deretter ved den opprettede ref til vårt React-element via ref Egenskap:

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;

OBS: Legg merke til at vi bare knyttet den opprettede referansen til ett av inngangselementene, som er det vi ønsker å sette til fokus.

La oss nå fortsette å bruke useEffect() krok for å legge fokus til elementet etter å ha gjengitt applikasjonen vår:

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;

Legg merke til at vi importerte koden ovenfor useEffect() hekte og brukte deretter kroken med en tom avhengighetsmatrise ([]) for å sikre at den bare utløses når komponenten først monteres. Til slutt, for å få det refererte elementet til å fokusere, vil vi få tilgang til refen via current attributt og deretter legge ved focus() metode:

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

På dette tidspunktet, når vår applikasjon eller komponent gjengis, vil det refererte elementet automatisk bli fokusert:

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;

Hvordan sette fokus på element etter gjengivelse i klassekomponenter

Så langt har vi sett hvordan man setter fokus på et element med en funksjonell komponent, men det er en helt annen syntaks med klassekomponenter siden vi ikke lenger bruker kroker fordi de bare fungerer i funksjonelle komponenter. I klassekomponenter lager vi vår ref innenfor constructor() metode og gjøre bruk av componentDidMount() metode for å sette det refererte elementet til å fokusere når applikasjonen vår gjengir:

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;

I koden ovenfor brukte vi constructor() metode for å lage en referanse, som vi festet til inngangselementet:

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

Vi brukte da componentDidMount() livssyklusmetoden, som er veldig lik useEffect() krok, for å sikre at elementet er satt i fokus når applikasjonen/komponenten vår gjengir:

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

konklusjonen

I denne artikkelen har vi lært hvordan du setter et element til å fokusere ved hjelp av et inndatafelt når applikasjonen eller komponenten vår gjengis i både klasse- og funksjonskomponentene. Begge metodene er de samme, men har forskjellig syntaks siden de er to forskjellige typer komponenter.