Sådan sætter du fokus på element efter gengivelse med React

Introduktion

Ved at sætte fokus på et element guider vi forsigtigt en bruger til det næste forventede inputfelt, hvilket giver dem en bedre browsingoplevelse med mindre gætværk.

I denne artikel lærer vi, hvordan du sætter fokus på et element efter gengivelse af vores React-applikation eller en React-komponent.

I traditionel HTML var det nemt at indstille et element til at fokusere ved hjælp af autofocus egenskab inden for vores tag, som er en boolesk attribut og som standard er sat til false. Det instruerer browseren om at fokusere på det specifikke inputfelt, og brugeren kan begynde at indtaste værdier med det samme:

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

Dette vil også fungere i vores React-applikationer. Alligevel, når vi ønsker at sætte fokus på et element efter gengivelse med mere programmatisk kontrol – kan vi gøre brug af useEffect() krog i funktionelle komponenter og den componentDidMount() livscyklusmetode i klassekomponenter.

Sådan sætter du fokus på element efter gengivelse i funktionelle komponenter

Tidligere, før introduktionen af ​​React hooks, kunne vi ikke håndtere operationer som denne med funktionelle komponenter.

Siden introduktionen af ​​kroge kan vi vide, hvornår vores applikation/komponent er fuldt gengivet, så vi kan udføre specifikke handlinger ved hjælp af useEffect() krog. Vi har også adgang til useRef() hook, som vi kan bruge til at referere til et bestemt element direkte.

Antag, at vi har en formular med to felter, og vi ønsker, at et af felterne skal sættes på fokus, efter at komponenten er gengivet:

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;

Lad os komme i gang med at få en reference til inputtet ved hjælp af useRef() Reaktionskrog. For at gøre dette ville vi først importere useRef() fra React, opret en ref og sæt dens værdi til null som standard, og vedhæft derefter den oprettede ref til vores React-element via 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;

Bemærk: Bemærk, at vi kun vedhæftede den oprettede reference til et af input-elementerne, som er det, vi ønsker at sætte til fokus.

Lad os nu fortsætte med at bruge useEffect() krog for at tilføje fokus til elementet efter gengivelse af vores applikation:

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;

Bemærk i koden ovenfor, at vi importerede useEffect() hook og brugte derefter krogen med et tomt afhængighedsarray ([]) for at sikre, at den kun udløses, når komponenten først monteres. Til sidst, for at få det refererede element til at fokusere, vil vi få adgang til refen via current attribut og vedhæft derefter focus() metode:

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

På dette tidspunkt, når vores applikation eller komponent gengives, vil det refererede element automatisk blive fokuseret:

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;

Sådan sætter du fokus på element efter gengivelse i klassekomponenter

Indtil videre har vi set, hvordan man sætter fokus på et element med en funktionel komponent, men det er en helt anden syntaks med klassekomponenter, da vi ikke længere gør brug af hooks, fordi de kun virker i funktionelle komponenter. I klassekomponenter opretter vi vores ref inden for constructor() metode og gør brug af componentDidMount() metode til at indstille det refererede element til at fokusere, når vores applikation gengiver:

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 brugte vi constructor() metode til at oprette en reference, som vi vedhæftede til input-elementet:

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

Vi brugte derefter componentDidMount() livscyklusmetode, som minder meget om useEffect() krog for at sikre, at elementet er sat i fokus, når vores applikation/komponent gengiver:

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

Konklusion

I denne artikel har vi lært, hvordan man indstiller et element til at fokusere ved hjælp af et inputfelt, når vores applikation eller komponent gengives i både klasse- og funktionskomponenterne. Begge metoder er de samme, men har forskellig syntaks, da de er to forskellige typer komponenter.