Fokussieren eines Eingabefelds in React nach dem Rendern

In React kann das Setzen des Fokus auf ein Eingabefeld nach dem Rendern durch verschiedene Methoden erreicht werden .

Ein Ansatz besteht darin, Refs zu verwenden, wie in der Dokumentation vorgeschlagen. Indem Sie dem Eingabefeld innerhalb der Renderfunktion einen Verweis zuweisen (z. B. „nameInput“), können Sie auf seinen DOM-Knoten zugreifen und die Fokusmethode manuell aufrufen. Es ist jedoch wichtig zu verstehen, wo und wann diese Funktion aufgerufen werden muss.

Aufrufen der Fokusfunktion

Der einfachste Ort zum Aufrufen der Fokusfunktion ist die Lebenszyklusmethode „componentDidMount“ der Komponente . Dadurch wird sichergestellt, dass der Fokus gesetzt wird, nachdem die Komponente im DOM gemountet wurde. Der Code würde so aussehen:

import React, { useRef, useEffect } from "react";

const MyComponent = () => {
  const nameInputRef = useRef();

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

  return (
    
  );
};

export default MyComponent;

Autofocus Option

Alternativ können Sie die von React bereitgestellte AutoFocus-Requisite verwenden. Indem Sie diese Requisite im Eingabefeld auf „true“ setzen, erhält die Komponente beim Mounten automatisch den Fokus.

return (
  
);

Beachten Sie, dass in JSX die Eigenschaft autoFocus (mit einem großen F) lautet, im Gegensatz zum HTML-Attribut, bei dem die Groß-/Kleinschreibung nicht berücksichtigt wird.