Comment utiliser les références dans les composants React

Cet article présente principalement l'utilisation détaillée des références des composants React. Maintenant, je le partage avec vous et le donne comme référence.

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 de 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. 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 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(&#39;content&#39;)
);

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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment modifier le nom du projet via le projet vue-cli+webpack

Comment implémenter l'enregistrement global dans le composant vue et l'enregistrement local

Comment implémenter une méthode globale personnalisée dans vue

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!