Kuinka asettaa tarkennus elementtiin Reactilla renderöinnin jälkeen

esittely

Asettamalla kohdistuksen elementtiin ohjaamme käyttäjän varovasti seuraavaan odotettavissa olevaan syöttökenttään, mikä antaa hänelle paremman selauskokemuksen ja vähemmän arvailuja.

Tässä artikkelissa opimme määrittämään kohdistuksen elementtiin React-sovelluksen tai React-komponentin renderöinnin jälkeen.

Perinteisessä HTML:ssä oli helppo asettaa elementti kohdistettaviksi käyttämällä autofocus attribuutti sisällämme tag, joka on boolen attribuutti ja on oletuksena asetettu arvoon false. Se ohjeistaa selainta keskittymään kyseiseen syöttökenttään, ja käyttäjä voi aloittaa arvojen syöttämisen välittömästi:

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

Tämä toimii myös React-sovelluksissamme. Silti, kun haluamme keskittyä elementtiin renderöinnin jälkeen ohjelmallisemmalla ohjauksella – voimme hyödyntää useEffect() koukku toiminnallisiin komponentteihin ja componentDidMount() elinkaarimenetelmä luokan komponenteissa.

Kuinka keskittyä elementtiin toiminnallisissa komponenteissa renderöinnin jälkeen

Aiemmin, ennen React-koukkujen käyttöönottoa, emme pystyneet käsittelemään tällaisia ​​toimintoja toiminnallisten komponenttien kanssa.

Koukkujen käyttöönoton jälkeen voimme tietää, milloin sovelluksemme/komponenttimme on täysin renderöity, jotta voimme suorittaa tiettyjä toimintoja käyttämällä useEffect() koukku. Meillä on myös pääsy useRef() koukku, jota voimme käyttää viittaamaan suoraan tiettyyn elementtiin.

Oletetaan, että meillä on lomake, jossa on kaksi kenttää, ja haluamme, että toinen kentistä on kohdistettu komponentin hahmontamisen jälkeen:

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;

Aloitetaan hankkimalla viittaus syötteeseen käyttämällä useRef() Reaktiokoukku. Tätä varten tuomme ensin useRef() Luo Reactista a ref ja aseta sen arvoksi oletuksena nolla ja liitä sitten luotu ref React-elementtiimme kautta ref määrite:

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;

Huomautus: Huomaa, että liitimme luodun viittauksen vain yhteen syöttöelementistä, jonka haluamme asettaa fokusoimaan.

Jatketaan nyt käyttämään useEffect() koukku lisätäksesi kohdistuksen elementtiin sovelluksemme renderöinnin jälkeen:

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;

Yllä olevasta koodista huomaa, että toimme useEffect() koukku ja sitten käytti koukkua tyhjällä riippuvuustaulukolla ([]) varmistaaksesi, että se laukeaa vain, kun komponentti kiinnitetään ensimmäisen kerran. Lopuksi, jotta viitattu elementti keskittyy, käytämme viitettä current attribuutti ja liitä sitten focus() menetelmä:

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

Tässä vaiheessa, kun sovelluksemme tai komponenttimme renderöidään, viitattu elementti tarkentuu automaattisesti:

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;

Kuinka keskittyä elementtiin luokan komponenteissa renderöinnin jälkeen

Toistaiseksi olemme nähneet, kuinka fokus voidaan asettaa elementtiin, jossa on toiminnallinen komponentti, mutta se on täysin erilainen syntaksi luokkakomponenttien kanssa, koska emme enää käytä koukkuja, koska ne toimivat vain toiminnallisissa komponenteissa. Luokan komponenteissa luomme viitteemme sisällä constructor() menetelmää ja hyödyntää componentDidMount() tapa asettaa viitattu elementti keskittymään, kun sovelluksemme renderöi:

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;

Yllä olevassa koodissa käytimme constructor() menetelmä viittauksen luomiseksi, jonka liitimme syöttöelementtiin:

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

Käytimme sitten componentDidMount() elinkaarimenetelmä, joka on hyvin samanlainen kuin useEffect() koukku varmistaaksesi, että elementti on kohdistettu, kun sovelluksemme/komponenttimme renderöi:

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

Yhteenveto

Tässä artikkelissa olemme oppineet määrittämään elementin fokusoitumaan käyttämällä syöttökenttää, kun sovelluksemme tai komponenttimme hahmonnetaan sekä Class- että Functional-komponenteissa. Molemmat menetelmät ovat samoja, mutta niillä on erilainen syntaksi, koska ne ovat kaksi erityyppistä komponenttia.