Partage d'exemples d'utilisation des références de composants React

ref Comme son nom l'indique, nous savons qu'il peut en fait être considéré comme une référence à un composant, ou qu'il peut également être considéré comme un identifiant. En tant qu'attribut de composant, sa valeur d'attribut peut être une chaîne ou une fonction. Cet article vous présente principalement l'utilisation détaillée des références des composants React. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

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é le élément d’entrée pour se concentrer. 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.

ref est sous la forme de

<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 pouvions accéder au DOM du composant via React.findDOMNode(this.refs.myInput). 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. Le composant référencé sera utilisé comme paramètre de la fonction, qui pourra utiliser le paramètre du composant immédiatement ou l'enregistrer 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 convient de noter ici que lorsque le composant de référence est déchargé et que la référence change, la valeur du paramètre de la référence précédente 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();
}

Ce qui précède présente les scénarios d'utilisation et les méthodes de la réf. that Implémentez 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(&#39;content&#39;)
);

Dans cet exemple, la fonction de rendu 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.

Recommandations associées :

Explication détaillée de l'utilisation des refs pour positionner dom dans la vue et les apparitions non définies

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!