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

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!