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

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>

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

<code class="javascript"><input autoFocus name="..." /></code>

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!