Comment focaliser un champ de saisie dans React après le rendu ?

Concentration sur un champ de saisie dans React post-rendu

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

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 obtiendra automatiquement le focus lors du montage.

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

Notez que, dans JSX, la propriété est autoFocus (avec un F majuscule), contrairement au cas- attribut HTML insensible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!