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

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

React fournit plusieurs méthodes pour définir le focus sur un champ de saisie après le rendu du composant.

Option 1 : Refs

Comme mentionné dans la documentation, vous pouvez utiliser une référence pour accéder au nœud DOM du champ de saisie. Cela peut être fait en définissant l'attribut ref sur le champ de saisie dans la fonction de rendu :

<input ref="nameInput" ... />

Ensuite, une fois le composant monté, vous pouvez utiliser la méthode focus() sur le nœud DOM pour définir le focus :

componentDidMount() {
  this.refs.nameInput.getInputDOMNode().focus();
}

Option 2 : AutoFocus

Vous pouvez également utiliser l'accessoire autoFocus pour qu'une entrée se concentre automatiquement une fois montée :

<input autoFocus name=... />

Notez qu'en JSX, autoFocus doit être en majuscule, contrairement au HTML brut où il n'est pas sensible à la casse.

En utilisant l'une ou l'autre de ces options, vous pouvez facilement définir le focus sur un champ de texte particulier après le rendu, garantissant ainsi à l'utilisateur commodité et amélioration de l’expérience utilisateur.

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!