Hur man ställer in fokus på element efter rendering med React

Beskrivning

Genom att fokusera på ett element guidar vi försiktigt en användare till nästa förväntade inmatningsfält, vilket ger dem en bättre surfupplevelse med mindre gissningar.

I den här artikeln kommer vi att lära oss hur man fokuserar på ett element efter att ha renderat vår React-applikation eller en React-komponent.

I traditionell HTML var det lätt att ställa in ett element att fokusera med hjälp av autofocus attribut inom vår tag, som är ett booleskt attribut och är som standard inställt på false. Den instruerar webbläsaren att fokusera på det specifika inmatningsfältet, och användaren kan börja ange värden direkt:

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

Detta kommer att fungera i våra React-applikationer också. Ändå, när vi vill fokusera på ett element efter rendering med mer programmatisk kontroll – kan vi använda oss av useEffect() haka i funktionskomponenter och componentDidMount() livscykelmetod i klasskomponenter.

Hur man ställer in fokus på element efter rendering i funktionella komponenter

Tidigare, före introduktionen av React-krokar, kunde vi inte hantera sådana här operationer med funktionella komponenter.

Sedan introduktionen av krokar kan vi veta när vår applikation/komponent har renderat helt så att vi kan utföra specifika åtgärder med hjälp av useEffect() krok. Vi har även tillgång till useRef() hook, som vi kan använda för att referera till ett visst element direkt.

Anta att vi har ett formulär med två fält och vi vill att ett av fälten ska ställas in på fokus efter att komponenten renderat:

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;

Låt oss börja med att få en referens till ingången med hjälp av useRef() Reagera krok. För att göra detta skulle vi först importera useRef() från React, skapa en ref och ställ sedan in dess värde till null som standard och bifoga sedan den skapade ref till vårt 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;

Notera: Lägg märke till att vi bara bifogade den skapade referensen till ett av ingångselementen, vilket är det vi vill ställa till fokus.

Låt oss nu fortsätta att använda useEffect() krok för att lägga fokus till elementet efter att ha renderat vår 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;

Lägg märke till att vi importerade koden ovan useEffect() krok och använde sedan kroken med en tom beroendematris ([]) för att se till att den bara tänds när komponenten initialt monteras. Slutligen, för att få det refererade elementet att fokusera, kommer vi att komma åt refen via current attribut och bifoga sedan focus() metod:

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

Vid denna tidpunkt, när vår applikation eller komponent renderas, fokuseras det refererade elementet automatiskt:

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;

Hur man ställer in fokus på element efter rendering i klasskomponenter

Hittills har vi sett hur man sätter fokus på ett element med en funktionell komponent, men det är en helt annan syntax med klasskomponenter eftersom vi inte längre använder krokar eftersom de bara fungerar i funktionella komponenter. I klasskomponenter skapar vi vår ref inom constructor() metod och använda sig av componentDidMount() metod för att ställa in det refererade elementet att fokusera när vår applikation renderar:

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 ovan använde vi constructor() metod för att skapa en referens, som vi bifogade till inmatningselementet:

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

Vi använde sedan componentDidMount() livscykelmetoden, som är mycket lik useEffect() krok, för att säkerställa att elementet är inställt på fokus när vår applikation/komponent återger:

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

Slutsats

I den här artikeln har vi lärt oss hur man ställer in ett element att fokusera med hjälp av ett inmatningsfält när vår applikation eller komponent renderas i både klass- och funktionskomponenterna. Båda metoderna är desamma men har olika syntax eftersom de är två olika typer av komponenter.