Partage de didacticiels sur l'utilisation des références dans React-js tutoriel-php.cn

Partage de didacticiels sur l'utilisation des références dans React

小云云

Libérer： 2018-02-22 09:41:09

original

1395 Les gens l'ont consulté

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>

Copier après la connexion

Dans le code ci-dessus, la fonction de rendu ne renvoie qu'une seule balise

, et il n'y a qu'une seule balise Dans l'attribut de la balise, un attribut ref est ajouté. Le document officiel explique l'attribut ref comme suit :

attribut ref

React. prend en charge Une propriété très spéciale que vous pouvez utiliser pour vous lier à n'importe quel composant généré 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 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. saisir. Parmi eux, "input" est la valeur de l'attribut ref défini pour la balise

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;]);

Copier après la connexion

Ce qui suit est une démo pour en savoir plus sur l'utilisation de ref :

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

Entrez n'importe quel nombre de 1 à 10 dans la zone de saisie supérieure, et la zone de saisie correspondante dans les 10 zones de saisie suivantes prendra le focus Comme le montre l'image ci-dessus, après avoir saisi 3, la troisième zone de saisie ci-dessous prendra immédiatement le focus. , l'attribut ref est utilisé ici, 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>

Copier après la connexion

Dans la fonction de rendu, 10 zones de saisie. sont ajoutés à la partie corps du document html, chaque entrée L'attribut ref de la boîte est défini sur ["index" + index], puis dans la fonction handleChange de la zone de saisie supérieure, le numéro d'entrée est obtenu et le La valeur de l'attribut ref est obtenue, et enfin, sur la base de la valeur de l'attribut ref, recherchez le nœud DOM réel correspondant, puis laissez le nœud DOM se concentrer.

Recommandations associées :

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

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!