Jak ustawić ostrość na elemencie po renderowaniu w React

Wprowadzenie

Skupiając się na elemencie, delikatnie kierujemy użytkownika do następnego oczekiwanego pola wejściowego, zapewniając mu lepsze wrażenia z przeglądania przy mniejszym zgadywaniu.

W tym artykule dowiemy się, jak ustawić fokus na elemencie po wyrenderowaniu naszej aplikacji React lub komponentu React.

W tradycyjnym HTML łatwo było ustawić element do skupienia za pomocą autofocus atrybut w naszym tag, który jest atrybutem logicznym i jest domyślnie ustawiony na false. Instruuje przeglądarkę, aby skupiła się na tym konkretnym polu wejściowym, a użytkownik może natychmiast rozpocząć wprowadzanie wartości:

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

To zadziała również w naszych aplikacjach React. Jeśli jednak chcemy skupić się na elemencie po renderowaniu z bardziej programową kontrolą – możemy skorzystać z useEffect() zaczepić elementy funkcjonalne i componentDidMount() metoda cyklu życia w komponentach klasy.

Jak ustawić ostrość na elemencie po renderowaniu w komponentach funkcjonalnych

Wcześniej, przed wprowadzeniem hooków Reacta, nie mogliśmy obsłużyć takich operacji z komponentami funkcjonalnymi.

Od czasu wprowadzenia hooków możemy wiedzieć, kiedy nasza aplikacja/komponent został w pełni wyrenderowany, dzięki czemu możemy wykonywać określone akcje za pomocą useEffect() hak. Mamy również dostęp do useRef() hook, którego możemy użyć do bezpośredniego odniesienia się do konkretnego elementu.

Załóżmy, że mamy formularz z dwoma polami i chcemy, aby jedno z pól było ustawione na fokus po wyrenderowaniu komponentu:

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;

Zacznijmy od uzyskania odniesienia do danych wejściowych za pomocą useRef() Reaguj hak. Aby to zrobić, najpierw zaimportowalibyśmy useRef() z React, utwórz ref i domyślnie ustaw jej wartość na null, a następnie dołącz utworzony ref do naszego elementu React poprzez ref atrybut:

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;

Uwaga: Zauważ, że dodaliśmy utworzone odniesienie tylko do jednego z elementów wejściowych, czyli tego, który chcemy ustawić jako fokus.

Przejdźmy teraz do korzystania z useEffect() hook, aby dodać fokus do elementu po wyrenderowaniu naszej aplikacji:

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;

Zauważ, że w powyższym kodzie zaimportowaliśmy useEffect() hook, a następnie wykorzystał hak z pustą tablicą zależności ([]), aby upewnić się, że uruchamia się tylko wtedy, gdy komponent jest początkowo montowany. Na koniec, aby skoncentrować się na elemencie, do którego się odwołuje, uzyskamy dostęp do ref poprzez current atrybut, a następnie dołącz focus() metoda:

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

W tym momencie, gdy nasza aplikacja lub komponent się wyrenderuje, element, do którego się odwołujemy, zostanie automatycznie skupiony:

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;

Jak ustawić fokus na elemencie po renderowaniu w komponentach klasy

Do tej pory widzieliśmy, jak ustawić skupienie na elemencie z komponentem funkcjonalnym, ale jest to zupełnie inna składnia z komponentami klas, ponieważ nie używamy już zaczepów, ponieważ działają one tylko w komponentach funkcjonalnych. W komponentach klasy tworzymy nasz ref w obrębie constructor() metody i skorzystaj z componentDidMount() metoda, aby ustawić element, do którego się odwołuje, aby się skoncentrował, gdy nasza aplikacja wyrenderuje:

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;

W powyższym kodzie użyliśmy constructor() metodę tworzenia referencji, którą dołączyliśmy do elementu input:

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

Następnie użyliśmy componentDidMount() metoda cyklu życia, która jest bardzo podobna do useEffect() hook, aby upewnić się, że element jest ustawiony na fokus po wyrenderowaniu naszej aplikacji/komponentu:

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

Wnioski

W tym artykule nauczyliśmy się, jak ustawić fokus na elemencie za pomocą pola wejściowego, gdy nasza aplikacja lub komponent wyrenderuje się zarówno w komponentach Class, jak i Functional. Obie metody są takie same, ale mają inną składnię, ponieważ są to dwa różne typy komponentów.