Concentration sur un champ de saisie dans React Post-Rendering

Dans React, la définition du focus sur un champ de saisie après le rendu peut être obtenue par diverses méthodes .

Une approche consiste à utiliser les références comme suggéré dans la documentation. En attribuant une référence au champ de saisie dans la fonction de rendu (par exemple, "nameInput"), vous pouvez accéder à son nœud DOM et appeler manuellement la méthode focus. Cependant, il est crucial de comprendre où et quand appeler cette fonction.

Appel de la fonction Focus

L'emplacement le plus simple pour appeler la fonction focus est la méthode de cycle de vie composantDidMount du composant. . Cela garantit que le focus est défini une fois le composant monté dans le DOM. Le code ressemblerait à ceci :

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

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

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

  return (
    
  );
};

export default MyComponent;

Option de mise au point automatique

Vous pouvez également utiliser l'accessoire autoFocus fourni par React. En définissant cet accessoire sur true dans le champ de saisie, le composant sera automatiquement mis en évidence lors du montage.

return (
  
);

Notez que, dans JSX, la propriété est autoFocus (avec un F majuscule), contrairement à l'attribut HTML qui ne respecte pas la casse.