So setzen Sie den Fokus auf das Element nach dem Rendern mit React

Einleitung

Indem wir den Fokus auf ein Element setzen, führen wir einen Benutzer sanft zum nächsten erwarteten Eingabefeld und bieten ihm so ein besseres Surferlebnis mit weniger Rätselraten.

In diesem Artikel erfahren wir, wie Sie den Fokus auf ein Element setzen, nachdem Sie unsere React-Anwendung oder eine React-Komponente gerendert haben.

In traditionellem HTML war es einfach, ein Element mithilfe von auf den Fokus zu setzen autofocus Attribut in unserem tag, das ein boolesches Attribut ist und standardmäßig auf gesetzt ist false. Es weist den Browser an, sich auf dieses bestimmte Eingabefeld zu konzentrieren, und der Benutzer kann sofort mit der Eingabe von Werten beginnen:

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

Dies wird auch in unseren React-Anwendungen funktionieren. Wenn wir uns jedoch nach dem Rendern mit mehr programmatischer Kontrolle auf ein Element konzentrieren möchten, können wir die verwenden useEffect() Funktionskomponenten einhängen und die componentDidMount() Lebenszyklusmethode in Klassenkomponenten.

So setzen Sie den Fokus auf das Element nach dem Rendern in funktionalen Komponenten

Früher, vor der Einführung von React-Hooks, konnten wir solche Operationen nicht mit funktionalen Komponenten handhaben.

Seit der Einführung von Hooks wissen wir, wann unsere Anwendung/Komponente vollständig gerendert wurde, sodass wir bestimmte Aktionen mit ausführen können useEffect() Haken. Wir haben auch Zugriff auf die useRef() Hook, mit dem wir direkt auf ein bestimmtes Element verweisen können.

Angenommen, wir haben ein Formular mit zwei Feldern und möchten, dass eines der Felder nach dem Rendern der Komponente fokussiert wird:

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;

Beginnen wir mit dem Abrufen einer Referenz auf die Eingabe mithilfe von useRef() Haken reagieren. Dazu würden wir zunächst importieren useRef() Erstellen Sie aus React eine ref und setzen Sie seinen Wert standardmäßig auf null und hängen Sie dann die erstellte an ref zu unserem React-Element über die ref Attribut:

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;

Hinweis: Beachten Sie, dass wir die erstellte Referenz nur an eines der Eingabeelemente angehängt haben, das wir als Fokus festlegen möchten.

Lassen Sie uns nun mit der Verwendung von fortfahren useEffect() Hook, um dem Element nach dem Rendern unserer Anwendung den Fokus hinzuzufügen:

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;

Beachten Sie im obigen Code, dass wir die importiert haben useEffect() Hook und nutzte dann den Hook mit einem leeren Abhängigkeitsarray ([]), um sicherzustellen, dass es nur ausgelöst wird, wenn die Komponente anfänglich bereitgestellt wird. Um schließlich das referenzierte Element zu fokussieren, greifen wir über die auf die Referenz zu current Attribut und hängen Sie dann die an focus() Verfahren:

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

An diesem Punkt, wenn unsere Anwendung oder Komponente rendert, wird das referenzierte Element automatisch fokussiert:

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;

So setzen Sie den Fokus auf das Element nach dem Rendern in Klassenkomponenten

Bisher haben wir gesehen, wie man den Fokus auf ein Element mit einer funktionalen Komponente setzt, aber es ist eine völlig andere Syntax mit Klassenkomponenten, da wir keine Hooks mehr verwenden, weil sie nur in funktionalen Komponenten funktionieren. In Klassenkomponenten erstellen wir unsere Referenz innerhalb der constructor() Methode und nutzen Sie die componentDidMount() Methode, um das referenzierte Element auf den Fokus zu setzen, sobald unsere Anwendung gerendert wird:

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;

Im obigen Code haben wir die constructor() Methode zum Erstellen einer Referenz, die wir an das Eingabeelement angehängt haben:

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

Wir haben dann die verwendet componentDidMount() Lifecycle-Methode, die der sehr ähnlich ist useEffect() Hook, um sicherzustellen, dass das Element fokussiert wird, sobald unsere Anwendung/Komponente gerendert wird:

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

Zusammenfassung

In diesem Artikel haben wir gelernt, wie Sie ein Element mithilfe eines Eingabefelds fokussieren, sobald unsere Anwendung oder Komponente sowohl in der Klassen- als auch in der Funktionskomponente gerendert wird. Beide Methoden sind gleich, haben aber eine unterschiedliche Syntax, da es sich um zwei verschiedene Arten von Komponenten handelt.