Focus op element instellen na renderen met React

Introductie

Door de focus op een element te zetten, leiden we een gebruiker voorzichtig naar het volgende verwachte invoerveld, waardoor ze een betere browse-ervaring krijgen met minder giswerk.

In dit artikel zullen we leren hoe we de focus op een element kunnen zetten na het renderen van onze React-toepassing of een React-component.

In traditionele HTML was het gemakkelijk om een ​​element in te stellen om te focussen met behulp van de autofocus attribuut binnen onze tag, wat een booleaans attribuut is en standaard is ingesteld op false. Het instrueert de browser om zich te concentreren op dat specifieke invoerveld en de gebruiker kan onmiddellijk beginnen met het invoeren van waarden:

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

Dit gaat ook werken in onze React-applicaties. Maar als we de nadruk willen leggen op een element na het renderen met meer programmatische controle, kunnen we gebruik maken van de useEffect() functionele componenten inhaken en de componentDidMount() levenscyclusmethode in klassencomponenten.

Focus op element instellen na weergave in functionele componenten

Voorheen, vóór de introductie van React hooks, konden we dergelijke operaties niet aan met functionele componenten.

Sinds de introductie van hooks kunnen we weten wanneer onze applicatie/component volledig is gerenderd, zodat we specifieke acties kunnen uitvoeren met behulp van de useEffect() haak. We hebben ook toegang tot de useRef() hook, die we kunnen gebruiken om rechtstreeks naar een bepaald element te verwijzen.

Stel dat we een formulier hebben met twee velden en we willen dat een van de velden op focus wordt gezet nadat de component wordt weergegeven:

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;

Laten we beginnen door een verwijzing naar de invoer te krijgen met behulp van de useRef() Reageer haak. Om dit te doen, zouden we eerst importeren useRef() van Reageren, maak een ref en stel de waarde standaard in op null en voeg vervolgens de gemaakte . toe ref naar ons React-element via de ref attribuut:

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;

Opmerking: Merk op dat we de gemaakte verwijzing alleen aan een van de invoerelementen hebben toegevoegd, en dat is degene waarop we willen focussen.

Laten we nu verder gaan met het gebruik van de useEffect() hook om focus aan het element toe te voegen na het renderen van onze applicatie:

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;

Merk in de bovenstaande code op dat we de hebben geïmporteerd useEffect() hook en maakte vervolgens gebruik van de hook met een lege afhankelijkheidsreeks ([]) om ervoor te zorgen dat het alleen wordt geactiveerd wanneer het onderdeel voor het eerst wordt geactiveerd. Ten slotte, om het element waarnaar wordt verwezen te focussen, zullen we toegang krijgen tot de ref via de current attribuut en voeg vervolgens de . toe focus() methode:

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

Op dit punt, wanneer onze toepassing of component wordt weergegeven, wordt het element waarnaar wordt verwezen automatisch gefocust:

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;

Focus op element instellen na weergave in klascomponenten

Tot nu toe hebben we gezien hoe we de focus kunnen leggen op een element met een functionele component, maar het is een heel andere syntaxis met klassecomponenten, aangezien we geen gebruik meer maken van hooks omdat ze alleen in functionele componenten werken. In klassecomponenten maken we onze ref binnen de constructor() methode en maak gebruik van de componentDidMount() methode om het element waarnaar wordt verwezen in te stellen om te focussen zodra onze toepassing wordt weergegeven:

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;

In de bovenstaande code hebben we de . gebruikt constructor() methode om een ​​referentie te maken, die we aan het invoerelement hebben toegevoegd:

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

We gebruikten toen de componentDidMount() levenscyclusmethode, die sterk lijkt op de useEffect() hook, om ervoor te zorgen dat het element in focus wordt gezet zodra onze applicatie/component rendert:

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

Conclusie

In dit artikel hebben we geleerd hoe u een element kunt instellen om te focussen met behulp van een invoerveld zodra onze toepassing of component wordt weergegeven in zowel de klasse- als de functionele componenten. Beide methoden zijn hetzelfde, maar hebben een verschillende syntaxis omdat het twee verschillende soorten componenten zijn.