Maison  >  Article  >  interface Web  >  Comment définir le focus sur un champ de saisie dans React après le rendu ?

Comment définir le focus sur un champ de saisie dans React après le rendu ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-02 02:42:30326parcourir

How to Set Focus on an Input Field in React After Rendering?

Définir le focus sur un champ de saisie après le rendu dans React

Définir le focus sur un champ de saisie spécifique après le rendu du composant peut être obtenu via React système de référence. En attribuant une référence au champ de saisie à l'aide de l'attribut "ref", vous accédez à son nœud DOM, vous permettant de manipuler son état de focus.

Comme mentionné dans la documentation, vous pouvez définir une référence nommée " nameInput" à votre champ de saisie pendant la fonction de rendu. Cependant, la question cruciale est : où devez-vous appeler la méthode "focus()" ?

Point d'appel optimal

Pour des résultats optimaux, vous devez appeler le "this .refs.nameInput.getInputDOMNode().focus()" dans la méthode de cycle de vie "componentDidMount". Cette méthode est invoquée immédiatement après le montage et l'insertion du composant dans le DOM. En appelant ici la méthode focus, vous vous assurez que le focus est défini dès que le composant devient visible.

Option alternative

La solution de @Dhiraj propose une approche alternative en en utilisant l'accessoire "autoFocus". Cet accessoire, lorsqu'il est défini sur true, demande au champ de saisie de se concentrer automatiquement lorsqu'il est monté. Vous pouvez l'utiliser comme ceci :

<input autoFocus name=... />

Notez que "autoFocus" doit être en majuscule "autoFocus" en JSX, contrairement au HTML, qui n'est pas sensible à la casse.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Dom et Dom VirtuelArticle suivant:Dom et Dom Virtuel