Wie fokussiere ich ein Eingabefeld in React nach dem Rendern?

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.

Fokusfunktion aufrufen

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 (
    <input ref={nameInputRef} name="..." />
  );
};

export default MyComponent;

Autofokus-Option

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

return (
  <input autoFocus name="..." />
);

Beachten Sie, dass in JSX die Eigenschaft „autoFocus“ (mit einem großen F) lautet, im Gegensatz zu case- unempfindliches HTML-Attribut.

Das obige ist der detaillierte Inhalt vonWie fokussiere ich ein Eingabefeld in React nach dem Rendern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!