Hogyan állítsunk fókuszt az elemre a React segítségével történő renderelés után

Bevezetés

Azáltal, hogy egy elemre állítjuk a fókuszt, finoman a következő várható beviteli mezőre irányítjuk a felhasználót, így jobb böngészési élményt nyújtunk kevesebb találgatás mellett.

Ebből a cikkből megtudjuk, hogyan állíthat fókuszt egy elemre a React alkalmazás vagy egy React összetevő renderelése után.

A hagyományos HTML-ben könnyű volt beállítani egy elemet, amelyre fókuszálni kell a autofocus attribútum a miénkben tag, amely egy logikai attribútum, és alapértelmezés szerint erre van beállítva false. Utasítja a böngészőt, hogy az adott beviteli mezőre összpontosítson, és a felhasználó azonnal megkezdheti az értékek beírását:

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

Ez a React alkalmazásainkban is működni fog. Mégis, ha egy elemre szeretnénk fókuszálni a renderelés után, még programozottabb vezérléssel – használhatjuk a useEffect() horog a funkcionális alkatrészekben és a componentDidMount() életciklus-módszer osztálykomponensekben.

Hogyan állítsunk fókuszt az elemre a funkcionális komponensekben történő renderelés után

Korábban, a React hook bevezetése előtt, a Funkcionális komponensekkel nem tudtunk ilyen műveleteket kezelni.

A hoook bevezetése óta tudjuk, hogy az alkalmazásunk/összetevőnk mikor készült el teljesen, így konkrét műveleteket hajthatunk végre a useEffect() horog. Hozzáférünk továbbá a useRef() hook, amellyel közvetlenül hivatkozhatunk egy adott elemre.

Tegyük fel, hogy van egy űrlapunk két mezővel, és azt szeretnénk, hogy az egyik mező fókuszba kerüljön az összetevő megjelenítése után:

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;

Kezdjük azzal, hogy hivatkozást kapunk a bemenetre a useRef() Reagálás horog. Ehhez először importálunk useRef() a Reactból hozzon létre a ref és alapértelmezés szerint állítsa az értékét nullra, majd csatolja a létrehozott ref a React elemünkhöz a ref tulajdonság:

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;

Jegyzet: Figyeljük meg, hogy a létrehozott hivatkozást csak az egyik bemeneti elemhez csatoltuk, amelyre fókuszálni szeretnénk.

Most folytassuk a használatát useEffect() horog az elem fókuszba helyezéséhez az alkalmazásunk renderelése után:

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;

A fenti kódban vegye észre, hogy importáltuk a useEffect() hook-ot, majd kihasználta a hook-ot egy üres függőségi tömbbel ([]). Végül, hogy a hivatkozott elemet fókuszba állítsuk, a ref-t a következőn keresztül érjük el current attribútumot, majd csatolja a focus() eljárás:

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

Ezen a ponton, amikor alkalmazásunk vagy összetevőnk megjelenik, a hivatkozott elem automatikusan fókuszba kerül:

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;

Hogyan állítsunk fókuszt az elemre az osztályösszetevőkben történő renderelés után

Eddig láttuk, hogyan állíthatunk fókuszt egy funkcionális komponenssel rendelkező elemre, de ez egy teljesen más szintaxis az osztályösszetevők esetében, mivel már nem használunk hook-okat, mert azok csak funkcionális komponensekben működnek. Az osztályösszetevőkben létrehozzuk a ref-ünket a constructor() módszert és használja ki a componentDidMount() metódus a hivatkozott elem fókuszálására, ha az alkalmazásunk megjelenik:

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;

A fenti kódban a constructor() módszer a hivatkozás létrehozására, amelyet a bemeneti elemhez csatoltunk:

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

Ezután használtuk a componentDidMount() életciklus módszer, amely nagyon hasonlít a useEffect() hook, hogy az elem fókuszban legyen, miután alkalmazásunk/összetevőnk megjeleníti:

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

Következtetés

Ebben a cikkben megtanultuk, hogyan állíthatunk be egy elemet fókuszba egy beviteli mező használatával, miután alkalmazásunk vagy összetevőnk az osztály és a funkcionális összetevőkben is megjelenik. Mindkét módszer ugyanaz, de eltérő a szintaxisuk, mivel két különböző típusú komponensről van szó.