Maison > Article > interface Web > Une explication détaillée des références dans React (tutoriel détaillé)

Une explication détaillée des références dans React (tutoriel détaillé)

亚连original: 2018-06-05 17:53:441569parcourir

Cet article présente principalement le tutoriel sur l'utilisation des références dans React. Maintenant, je le partage avec vous et le donne comme référence.

ref est un attribut dans React. Lorsque la fonction de rendu renvoie une instance d'un composant, vous pouvez ajouter un attribut ref à un nœud DOM virtuel dans le rendu, comme indiqué dans le code suivant :

<body> 
  <script type="text/jsx"> 
    var App = React.createClass({ 
      render: function() { 
        return ( 
          <p> 
            <input type="text" placeholder="input something..." ref="input" /> 
          </p> 
        ); 
      } 
    }); 
    React.render( 
      <App />, 
      document.body 
    ); 
  </script> 
</body>

Dans le code ci-dessus, la fonction de rendu ne renvoie qu'une seule balise e388a4556c0f65e1904146cc1a846bee, et il n'y a qu'une seule balise d5fd7aea971a85678ba271703566ebfd L'attribut ref est ajouté. La documentation officielle explique l'attribut ref comme suit :

attribut ref

React prend en charge un attribut très spécial que vous pouvez utiliser pour lier Target à n'importe quel composant. sortie par render(). Cette propriété spéciale vous permet de référencer l'instance de support correspondante renvoyée par render(). Cela garantit que vous obtenez toujours la bonne instance à tout moment.

Quel est le but de définir l'attribut ref sur la balise d5fd7aea971a85678ba271703566ebfd Voici l'explication donnée par la documentation officielle :

Dans un autre code (généralement du code de gestion d'événements), récupérez l'instance de support (instance de support) via this.refs, comme ceci : this.refs.input. Parmi eux, "input" est la valeur de l'attribut ref défini pour la balise d5fd7aea971a85678ba271703566ebfd

Grâce à l'attribut ref, nous pouvons également obtenir le nœud DOM réel correspondant au DOM virtuel. Il existe deux façons d'obtenir le nœud DOM réel, comme indiqué dans le code suivant :

<input type="text" ref="username" /> 
//下面4种方式都可以通过ref获取真实DOM节点 
var usernameDOM = this.refs.username.getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs.username); 
var usernameDOM = this.refs[&#39;username&#39;].getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs[&#39;username&#39;]);

<.>Ci-dessous, découvrez l'utilisation de ref via une démo :

L'effet de la démo exécutée dans le navigateur est le suivant :

Entrez n'importe quoi dans la zone de saisie supérieure Un nombre de 1 à 10 permettra à la zone de saisie correspondante parmi les 10 zones de saisie ci-dessous d'obtenir le focus. Comme le montre la figure ci-dessus, après avoir saisi 3, la troisième zone de saisie ci-dessous obtiendra immédiatement le focus. est utilisé ici, et le code est le suivant :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Refs</title> 
  <script type="text/javascript" src="../react-0.13.0/build/react.js"></script> 
  <script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script> 
</head> 
<body> 
  <script type="text/jsx"> 
    var App = React.createClass({ 
      handleChange: function(event) { 
        var index = event.target.value; 
        if(index >= 1 && index <= 10) { 
          //找到对应的输入框并将焦点设置到里面 
          var refName = "input" + index; 
          //var inputDOM = React.findDOMNode(this.refs[refName]); 
          var inputDOM = this.refs[refName].getDOMNode(); 
          inputDOM.focus(); 
        } 
      }, 
      render: function() { 
        var inputs = []; 
        for(var i = 1; i <= 10; i++) { 
          inputs.push(<p><li><input type="text" ref={"input" + i}/></li><br/></p>); 
        } 
        return ( 
          <p> 
            <label htmlFor="input" >在这里输入下面任意输入框的索引，光标会自动定位到输入框内：</label> 
            <input type="text" id="input" onChange={this.handleChange} /> 
            <hr /> 
            <ol> 
              {inputs} 
            </ol> 
          </p> 
        ) 
      } 
    }); 
    React.render( 
      <App />, 
      document.body 
    ); 
  </script> 
</body> 
</html>

Dans la fonction de rendu, 10 zones de saisie sont ajoutées à la partie corps du document html. L'attribut ref de chaque zone de saisie est défini sur [. "index" + index], puis dans la fonction handleChange de la zone de saisie supérieure, obtenez le numéro saisi et obtenez la valeur de l'attribut ref. Enfin, en fonction de la valeur de l'attribut ref, recherchez le nœud DOM réel correspondant, puis laissez le nœud DOM obtenir le focus.

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

Articles Liés

Voir plus