Cum să setați focalizarea pe element după randare cu React

Introducere

Punând accentul pe un element, ghidăm ușor un utilizator către următorul câmp de introducere așteptat, oferindu-i o experiență de navigare mai bună, cu mai puține presupuneri.

În acest articol, vom învăța cum să se concentreze asupra unui element după ce redăm aplicația noastră React sau o componentă React.

În HTML tradițional, a fost ușor să setați un element pentru a se concentra folosind autofocus atribut în interiorul nostru tag, care este un atribut boolean și este setat implicit la false. Acesta indică browserului să se concentreze pe acel câmp de intrare specific, iar utilizatorul poate începe să introducă valori imediat:

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

Acest lucru va funcționa și în aplicațiile noastre React. Totuși, atunci când dorim să ne concentrăm pe un element după randare cu mai mult control programatic - putem folosi useEffect() cârlig în componente funcționale și componentDidMount() metoda ciclului de viață în componentele clasei.

Cum să setați focalizarea pe element după randare în componentele funcționale

Anterior, înainte de introducerea cârligelor React, nu puteam face față unor astfel de operațiuni cu componente funcționale.

De la introducerea cârligelor, putem ști când aplicația/componenta noastră s-a redat complet, astfel încât să putem efectua acțiuni specifice folosind useEffect() cârlig. Avem și acces la useRef() cârlig, pe care îl putem folosi pentru a face referire direct la un anumit element.

Să presupunem că avem un formular cu două câmpuri și dorim ca unul dintre câmpuri să fie setat pe focus după ce componenta este redată:

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;

Să începem prin a obține o referință la intrare folosind useRef() Cârlig de reacție. Pentru a face acest lucru, am importa mai întâi useRef() din React, creați un ref și setați valoarea sa la nul în mod implicit, apoi atașați creatul ref la elementul nostru React prin intermediul 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;

Notă: Observați că am atașat referința creată doar la unul dintre elementele de intrare, care este cel pe care vrem să îl setăm să se concentreze.

Să trecem acum la folosirea useEffect() cârlig pentru a adăuga focalizarea elementului după redarea aplicației noastre:

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;

În codul de mai sus, observați că am importat useEffect() hook și apoi a folosit hook-ul cu o matrice de dependențe goală ([]) pentru a vă asigura că se declanșează numai atunci când componenta se montează inițial. În cele din urmă, pentru a focaliza elementul referit, vom accesa ref prin intermediul current atribut și apoi atașați focus() metodă:

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

În acest moment, când aplicația sau componenta noastră este redată, elementul referit va fi focalizat automat:

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;

Cum să setați focalizarea pe element după randarea în componentele clasei

Până acum, am văzut cum să se concentreze asupra unui element cu o componentă funcțională, dar este o sintaxă complet diferită cu componentele clasei, deoarece nu mai folosim cârlige, deoarece funcționează doar în componente funcționale. În componentele clasei, creăm referința noastră în cadrul constructor() metoda și folosiți componentDidMount() metodă de a seta elementul referit să se concentreze odată ce aplicația noastră este redată:

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;

În codul de mai sus, am folosit constructor() metodă de a crea o referință, pe care am atașat-o elementului de intrare:

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

Am folosit apoi componentDidMount() metoda ciclului de viață, care este foarte asemănătoare cu cea useEffect() cârlig, pentru a ne asigura că elementul este setat pe focus odată ce aplicația/componenta noastră este redată:

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

Concluzie

În acest articol, am învățat cum să setăm un element să se concentreze folosind un câmp de intrare odată ce aplicația sau componenta noastră este redată atât în ​​componentele Clasă, cât și în cele funcționale. Ambele metode sunt aceleași, dar au sintaxă diferită, deoarece sunt două tipuri diferite de componente.