Heim > Artikel > Web-Frontend > Eine ausführliche Erklärung von Refs in React (ausführliches Tutorial)

Eine ausführliche Erklärung von Refs in React (ausführliches Tutorial)

亚连Original: 2018-06-05 17:53:441523Durchsuche

Dieser Artikel stellt hauptsächlich das Tutorial zur Verwendung von Refs in React vor. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

ref ist ein Attribut in React. Wenn die Renderfunktion eine Instanz einer Komponente zurückgibt, können Sie einem virtuellen DOM-Knoten im Render ein Ref-Attribut hinzufügen, wie im folgenden Code gezeigt:

<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>

Im obigen Code gibt die Renderfunktion nur ein d5fd7aea971a85678ba271703566ebfd-Tag zurück und es gibt nur ein d5fd7aea971a85678ba271703566ebfd-Tag Attribut. Die offizielle Dokumentation erklärt das Ref-Attribut wie folgt:

Ref-Attribut

React unterstützt ein ganz besonderes Attribut, das Sie zum Binden an jede Komponente verwenden können, die render( ) Ausgänge steigen. Mit dieser speziellen Eigenschaft können Sie auf die entsprechende von render() zurückgegebene Hintergrundinstanz verweisen. Dadurch ist sichergestellt, dass Sie jederzeit die richtige Instanz erhalten.

Was ist der Zweck, das ref-Attribut auf das d5fd7aea971a85678ba271703566ebfd-Tag zu setzen? Das Folgende ist die Erklärung in der offiziellen Dokumentation:

Rufen Sie in anderem Code (normalerweise Ereignisbehandlungscode) die Backing-Instanz (Backing-Instanz) über this.refs ab, etwa so: this.refs.input. Unter diesen ist „input“ der Wert des ref-Attributs, das für das d5fd7aea971a85678ba271703566ebfd-Tag festgelegt wurde.

Über das ref-Attribut können wir auch den realen DOM-Knoten abrufen, der dem virtuellen DOM entspricht. Es gibt zwei Möglichkeiten, den realen DOM-Knoten abzurufen, wie im folgenden Code gezeigt:

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

Das Folgende ist eine Demo, um die Verwendung von ref zu verstehen:

Die Auswirkung der im Browser ausgeführten Demo ist wie folgt:

Geben Sie eine beliebige 1-in ein Das obere Eingabefeld Mit der Zahl 10 erhält das entsprechende Eingabefeld unter den folgenden 10 Eingabefeldern den Fokus. Wie im Bild oben gezeigt, erhält das dritte Eingabefeld unten sofort den Fokus. Das Ref-Attribut wird hier verwendet. und der Code lautet wie folgt:

<!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>

In der Renderfunktion werden 10 Eingabefelder zum Hauptteil des HTML-Dokuments hinzugefügt. Das ref-Attribut jedes Eingabefelds ist auf ["index" + index] gesetzt. Rufen Sie dann in der Funktion handleChange des Eingabefelds die eingegebene Zahl und den Wert des Ref-Attributs ab. Suchen Sie schließlich anhand des Werts des Ref-Attributs den entsprechenden realen DOM-Knoten und lassen Sie ihn dann los Konzentrieren Sie sich.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

js-Erfahrung beim Teilen von JavaScript-Anti-Debugging-Fähigkeiten

Verwenden von node.js zum Packen von Webpacks

So verwenden Sie ein externes Modul im Webpack

Das obige ist der detaillierte Inhalt vonEine ausführliche Erklärung von Refs in React (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erzielen Sie mit JS einen intermittierenden Text-Scroll-EffektNächster Artikel：So erzielen Sie mit JS einen intermittierenden Text-Scroll-Effekt

In Verbindung stehende Artikel

Mehr sehen