Як встановити фокус на елементі після рендерингу за допомогою React

Вступ

Установлюючи фокус на елементі, ми м’яко спрямовуємо користувача до наступного очікуваного поля введення, надаючи йому кращий досвід перегляду з меншими припущеннями.

У цій статті ми дізнаємося, як встановити фокус на елементі після рендерингу нашої програми React або компонента React.

У традиційному HTML було легко встановити елемент для фокусування за допомогою autofocus атрибут у межах нашого тег, який є логічним атрибутом і за замовчуванням має значення false. Він наказує браузеру зосередитися на цьому конкретному полі введення, і користувач може негайно почати вводити значення:

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

Це також працюватиме в наших програмах React. Проте, коли ми хочемо встановити фокус на елементі після рендерингу з більшим програмним керуванням, ми можемо скористатися useEffect() гак у функціональних компонентах і componentDidMount() метод життєвого циклу в компонентах класу.

Як встановити фокус на елементі після візуалізації у функціональних компонентах

Раніше, до появи хуків React, ми не могли виконувати такі операції з функціональними компонентами.

З моменту появи хуків ми можемо знати, коли наша програма/компонент повністю відтворилися, щоб ми могли виконувати певні дії за допомогою useEffect() гачок. Ми також маємо доступ до useRef() гачок, який ми можемо використовувати для безпосереднього посилання на певний елемент.

Припустімо, у нас є форма з двома полями, і ми хочемо, щоб одне з полів було встановлено у фокусі після рендерингу компонента:

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;

Давайте почнемо з отримання посилання на вхід за допомогою useRef() React хук. Для цього ми спочатку імпортуємо useRef() з React створіть a ref і встановіть його значення null за замовчуванням, а потім прикріпіть створений ref до нашого елемента React через ref атрибут:

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;

Примітка: Зауважте, що ми лише прикріпили створене посилання до одного з вхідних елементів, на який ми хочемо встановити фокус.

Давайте тепер приступимо до використання useEffect() гачок, щоб додати фокус до елемента після рендерингу нашої програми:

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;

У наведеному вище коді зверніть увагу, що ми імпортували useEffect() хук, а потім використав хук із порожнім масивом залежностей ([]), щоб переконатися, що він запускається лише під час початкового монтування компонента. Нарешті, щоб сфокусувати елемент, на який посилається, ми отримаємо доступ до посилання через current а потім приєднайте focus() метод:

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

У цей момент, коли наш додаток або компонент рендериться, елемент, на який посилається, буде автоматично сфокусований:

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;

Як установити фокус на елементі після візуалізації в компонентах класу

Поки що ми бачили, як встановити фокус на елементі з функціональним компонентом, але це зовсім інший синтаксис із компонентами класу, оскільки ми більше не використовуємо хуки, оскільки вони працюють лише у функціональних компонентах. У компонентах класу ми створюємо наше посилання всередині constructor() метод і використовувати componentDidMount() метод для налаштування елемента, на який посилається, для фокусування після рендерингу нашої програми:

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;

У коді вище ми використали constructor() метод для створення посилання, яке ми приєднали до елемента input:

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

Потім ми використали componentDidMount() метод життєвого циклу, який дуже схожий на useEffect() гачок, щоб гарантувати, що елемент буде встановлений у фокусі, коли наша програма/компонент візуалізує:

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

Висновок

У цій статті ми дізналися, як налаштувати фокусування елемента за допомогою поля введення, коли наша програма або компонент відображається як у компоненті Class, так і в Functional. Обидва методи однакові, але мають різний синтаксис, оскільки це два різних типи компонентів.