Comment utiliser les références des composants React

Cette fois, je vais vous montrer comment utiliser les références de composants React, et quelles sont les précautions lors de l'utilisation des références de composants React. Voici un cas pratique, jetons un coup d'oeil.

ref Comme son nom l'indique, on sait qu'il peut en réalité être considéré comme une référence à un composant, ou on peut aussi dire qu'il s'agit d'un logo. En tant qu'attribut d'un composant, sa valeur d'attribut peut être une chaîne ou une fonction.

En fait, l'utilisation de ref n'est pas nécessaire. Même dans les scénarios où cela est applicable, ce n'est pas nécessaire, car les fonctions implémentées à l'aide de ref peuvent également être converties en d'autres méthodes. Cependant, puisque ref a ses scénarios applicables, cela signifie que ref a ses propres avantages. Concernant cela et les scénarios applicables de ref, la documentation officielle dit ceci :

Après avoir renvoyé la structure de l'interface utilisateur à partir de la méthode de rendu, vous souhaiterez peut-être sortir des limitations du DOM virtuel React et utiliser l'instance de composant. renvoyé par render Appel de certaines méthodes. De manière générale, cela n'est pas nécessaire pour le flux de données dans l'application, car le flux de données réactif garantit toujours que les derniers accessoires sont transmis à chaque sortie enfant de render(). Cependant, il existe encore plusieurs scénarios dans lesquels l'utilisation de cette approche est nécessaire ou bénéfique : trouver le balisage DOM du composant rendu (qui peut être considéré comme l'ID d'identification DOM), utiliser des composants React dans une grande application non-React ou convertir votre code existant dans React.

Regardons un tel scénario (l'exemple suivant est souvent utilisé pour expliquer ref, on voit donc que le scénario décrit ci-dessous devrait être plus classique) : utiliser un événement pour faire le est définie sur la chaîne vide et l'élément

var App = React.createClass({
  getInitialState: function() {
   return {userInput: ''};
  },
  handleChange: function(e) {
   this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
   this.setState({userInput: ''}); // 设置值为空字符串
        //这里想要实现获得焦点   
  },
  render: function() {
   return (
    <p>
     <input
      value={this.state.userInput}
      onChange={this.handleChange}
     />
          <input type="button"
           value="Reset And Focus"
           onClick={this.clearAndFocusInput}
        />
    </p>
   );
  }
 });

Dans l'exemple ci-dessus, nous avons implémenté le fait de cliquer sur le bouton pour notifier à l'élément d'entrée de définir la valeur sur une chaîne vide, mais nous n'avons pas encore implémenté l'élément d'entrée pour obtenir le focus. C'est un peu difficile à implémenter car ce qui est renvoyé dans render() n'est pas la combinaison réelle de sous-composants, juste une description d'une instance spécifique à un moment précis. Cette phrase semble assez déroutante. En fait, render renvoie un DOM virtuel, pas un vrai DOM. Nous n'avons donc pas besoin de nous concentrer uniquement sur les composants renvoyés par render().

En parlant de ça, cela ne nous aide pas beaucoup à nous concentrer. Pour réaliser la fonction de mise au point, nous devons utiliser la réf. Nous avons mentionné ci-dessus qu'il existe deux types de valeurs de référence, l'une est une chaîne et l'autre est une fonction de rappel .

Attribut de chaîne de référence

React prend en charge un attribut spécial que vous pouvez ajouter à n'importe quel composant renvoyé par render(). Cela signifie que le composant renvoyé par render() est marqué afin que l'instance du composant puisse être facilement localisée. C'est à cela que sert la référence.

La forme de la ref est la suivante

<input ref="myInput" />

Pour accéder à cette instance, vous pouvez y accéder via this.refs :

this.refs.myInput

Dans les versions précédentes, nous peut y accéder via React .findDOMNode(this.refs.myInput) pour accéder au DOM du composant. Mais maintenant, la fonction findDOMNode a été abandonnée et est accessible directement en utilisant this.refs.myInput.

Fonction de rappel ref

L'attribut ref peut également être une fonction de rappel au lieu d'un nom. Cette fonction sera exécutée immédiatement après le montage du composant. Ce composant référencé servira de paramètre de la fonction . Cette fonction peut utiliser ce paramètre de composant immédiatement, ou bien sûr, elle peut le sauvegarder pour une utilisation ultérieure.

Le formulaire est également relativement simple :

render: function() {
  return <TextInput ref={(c) => this._input = c} } />;
},
componentDidMount: function() {
  this._input.focus();
},

ou

render: function() {
  return (
   <TextInput
    ref={function(input) {
     if (input != null) {
      input.focus();
     }
    }} />
  );
},

Il est à noter ici que lorsque le composant de référence est déchargé et que la ref change, le précédent La valeur du paramètre ref sera nulle. Cela empêchera efficacement les fuites de mémoire. Par conséquent, il y aura un jugement if dans le code ci-dessus :

if(input != null){
     input.focus();
}

Les scénarios d'utilisation et les méthodes de ref sont présentés ci-dessus, nous allons maintenant compléter l'exemple ci-dessus pour réaliser la fonction d'obtention du focus

.

var App = React.createClass({
  getInitialState: function() {
    return {userInput: ''};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: ''}); // Clear the input
    // We wish to focus the <input /> now!
    if (this.refs.myTextInput !== null) {
      this.refs.myTextInput.focus();
    }
  },
  render: function() {
    return (
      <p>
        <input
          value={this.state.userInput}
          onChange={this.handleChange}
          ref=”myTextInput”   
                     />
        <input
          type="button"
          value="Reset And Focus"
          onClick={this.clearAndFocusInput}
          />
      </p>
    );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('content')
);

Dans cet exemple, la fonction render renvoie une description de l'instance Mais l'instance réelle est obtenue via this.refs.myTextInput. Tant qu'un sous-composant renvoyé par render a ref="myTextInput", this.refs.myTextInput obtiendra la bonne instance.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JS ajoutant un nouvel élément élément

4 façons de boucler la liste Nodelist Dom en JS

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!