Setzen Sie den Fokus nach dem Rendern mit React auf ein Eingabefeld

1. Verwenden Sie die componentDidMount()-Methode in React
2. Verwenden Sie die Prop-Methode autoFocus in React
3. Verwenden Sie die Inline-Ref-Property-Methode in React
4. Abschluss

Eingabefelder sind diese breiten Balken, in die wir Informationen eingeben, die an den Server der Website gesendet werden sollen. Ein beliebtes Beispiel ist die Suchleiste von google.com.

Dieser Artikel zeigt verschiedene Methoden, um sich auf ein Eingabefeld zu konzentrieren, nachdem die Reaktionskomponenten auf der Webseite gerendert wurden.

Verwenden Sie die componentDidMount()-Methode in React

Um unser React-Projekt zu starten, erstellen Sie ein neues Projekt mit npx create-react-app exampleone vom Terminal aus, wonach wir zum Projektnamen navigieren.

Durch die Anwendung der Methode componentDidMount() wird das Eingabefeld nach dem Anzeigen der Seite fokussiert. Diese Funktion eignet sich gut, um das Laden von Seiten zu beschleunigen, da die Funktion Daten erst nach dem Rendern der ersten Seite lädt und einmal aufgerufen wird.

Codeschnipsel - App.js:

import React, { Component } from "react";
class App extends Component {

componentDidMount() {
this.nameInput.focus();
}

render() {
    return (
        <div>
            <input
            defaultValue="It Won't focus"
            />
            <input
            ref={(input) => { this.nameInput = input; }}
            defaultValue="It will focus"
            />
        </div>
    );
    }
}
export default App;

Verwenden Sie die Prop-Methode autoFocus in React

Nach dem ersten Rendern der Seite wird das Eingabefeld automatisch für den Benutzer hervorgehoben. Diese Methode ist ideal für eine Website mit vielen Inhalten, die möchten, dass ihre Benutzer das Eingabefeld nach dem Laden der Seite leicht finden können.

Der Entwickler muss auf diese autoFocus-Funktion achten, da die erste fokussiert wird, wenn diese Funktionen auf mehrere Elemente angewendet werden.

Codeschnipsel - App.js:

import React, { Component } from "react";

class App extends Component {
render() {
    return(
        <div>
            <input
            defaultValue="It Won't focus"
            />
            <input autoFocus
            defaultValue="It will focus"
            />
        </div>
        );
    }
}

export default App;

Verwenden Sie die Inline-Ref-Property-Methode in React

Mit dieser Methode müssen wir die Focus-Funktion in die Render-Komponente schreiben. Diese Methode ist die bequemste, da sie einfach zu codieren und in Situationen leicht zu verstehen ist, in denen wir unsere Codes mit einem anderen Entwickler teilen.

Codeschnipsel - App.js:

import React, { Component } from "react";

class App extends Component {

    render() {
        return(
            <div>
                <input
                defaultValue="It Won't focus"
                />
                <input
                ref={(input) => {input && input.focus() }}
                defaultValue="It will focus"
                />
            </div>
        );
    }

}

export default App;

Wenn wir mit jeder Methode fertig sind, führen wir die Anwendung mit npm start aus.

Ausgang:

Abschluss

Der Fokuseffekt in React ist eine Möglichkeit, Benutzern zu helfen, ein reibungsloses und weniger umständliches Surferlebnis zu erreichen, da er die Eingabe für das Auge offensichtlicher macht und gleichzeitig der Webseite etwas Schönheit verleiht.