Maison  >  Article  >  interface Web  >  Comment définir le focus du champ de saisie dans React ?

Comment définir le focus du champ de saisie dans React ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-04 03:56:29837parcourir

How to Set Input Field Focus in React?

Définition du focus du champ de saisie dans React

Lors de la gestion de l'interaction des utilisateurs au sein d'une application React, il est souvent nécessaire de se concentrer sur des champs de saisie spécifiques après le rendu de la page. La question se pose de savoir quelle est la meilleure façon d'y parvenir.

La documentation de React recommande d'utiliser refs : pour ce faire, attachez un attribut ref au champ de saisie, tel que "nameInput", dans la fonction de rendu. Par la suite, vous pouvez appeler la méthode "this.refs.nameInput.getInputDOMNode().focus();" pour mettre le champ de saisie au point.

Cependant, cette méthode introduit la question de savoir où placer cet appel. La réponse de Dhiraj fournit une solution viable : placer l'appel focus dans le composant de la méthode de cycle de vie ReactDidMount().

Alternativement, pour plus de facilité d'utilisation, vous pouvez tirer parti de l'accessoire autoFocus pour mettre automatiquement en évidence une entrée lors de son montage :

/>

Notez qu'en JSX, l'accessoire autoFocus est écrit avec un F majuscule, contrairement au HTML simple, où il est insensible à 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