Maison > interface Web > js tutoriel > Comment concentrer les champs de saisie dans React après le rendu ?

Comment concentrer les champs de saisie dans React après le rendu ?

Patricia Arquette
Libérer: 2024-11-02 15:20:02
original
1032 Les gens l'ont consulté

How to Focus Input Fields in React After Rendering?

Se concentrer sur les champs de saisie après le rendu dans React

La manipulation des éléments après leur rendu initial est un besoin courant dans le développement front-end. Dans React, y parvenir pour les champs de saisie implique de définir le focus pour garantir des interactions utilisateur transparentes.

Une approche mentionnée dans la documentation consiste à utiliser des références. Cela implique d'attribuer un attribut ref au champ de saisie dans la fonction de rendu, tel que ref="nameInput". Pour concentrer l'entrée, vous pouvez ensuite appeler this.refs.nameInput.getInputDOMNode().focus();. Cependant, cela peut ne pas toujours fonctionner comme prévu.

Par exemple, vous avez peut-être essayé d'appeler this.refs.nameInput.getInputDOMNode().focus(); dans la méthode de cycle de vie composantDidMount(). Cependant, cela ne fonctionnera pas car les nœuds DOM ne sont pas encore disponibles à ce stade.

Au lieu de cela, le focus doit être défini après le rendu du DOM. Une façon de procéder consiste à créer une fonction pour l'opération de focus et à l'appeler à partir de la méthode de cycle de vie composantDidUpdate(). Voici un exemple :

<code class="javascript">class MyComponent extends React.Component {
  focusInput() {
    this.inputElement.focus();
  }

  componentDidUpdate() {
    this.focusInput();
  }

  render() {
    return <input ref={el => this.inputElement = el} />;
  }
}</code>
Copier après la connexion

Vous pouvez également tirer parti de l'accessoire autoFocus :

<code class="javascript"><input autoFocus name="..." /></code>
Copier après la connexion

Cela garantit que l'entrée reçoit automatiquement le focus lors du montage. Notez la majuscule de l'accessoire autoFocus dans JSX.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal