React の refs の詳細な説明 (詳細なチュートリアル)-jsチュートリアル-php.cn

React の refs の詳細な説明 (詳細なチュートリアル)

亚连

リリース： 2018-06-05 17:53:44

オリジナル

1617 人が閲覧しました

この記事では主に React での refs の使い方についてのチュートリアルを紹介しますので、参考にしてください。

ref は React の属性です。レンダー関数がコンポーネントのインスタンスを返すとき、次のコードに示すように、レンダー内の仮想 DOM ノードに ref 属性を追加できます。コードによれば、render 関数は

タグを 1 つだけ返し、タグの属性には ref 属性が追加されます。公式ドキュメントでは、ref 属性について次のように説明されています:

ref 属性

React は、render() によって出力されたコンポーネントにバインドするために使用できる非常に特別な属性をサポートしています。この特別なプロパティを使用すると、render() によって返される対応するバッキングインスタンスを参照できます。これにより、いつでも常に正しいインスタンスを取得できるようになります。

タグに ref 属性を設定する目的は何ですか?以下は公式ドキュメントによる説明です:

他のコード (通常はイベント処理コード) では、this.refs を通じてバッキングインスタンス (バッキングインスタンス) を取得します。 this.refs.input のようになります。このうち「input」は、上記でタグに設定したref属性の値です。

ref 属性を通じて、仮想 DOM に対応する実際の DOM ノードを取得することもできます。次のコードに示すように、実際の DOM ノードを取得するには 2 つの方法があります。

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

ログイン後にコピー

以下は、を理解するためのデモです。参照の使用:

ブラウザで実行されるデモの効果は次のとおりです:

一番上の入力ボックスに 1 から 10 までの任意の数字を入力すると、次の 10 個の入力ボックスの対応する入力ボックスが取得されます。上に示すように、「3」を入力すると、すぐに下の 3 番目の入力ボックスがフォーカスされます。コードは次のとおりです。

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

ログイン後にコピー

レンダリング関数では、10 個の入力ボックスがボディ部分に追加されます。各入力ボックスの ref 属性はすべて ["index" +index] に設定され、上部の入力ボックスの handleChange 関数で入力された数値を取得し、ref 属性の値を取得します。 ref 属性の値に基づいて、対応する実際の DOM ノードを見つけて、その DOM ノードにフォーカスを取得します。

上記は私があなたのためにまとめたものです。

js の経験を共有する JavaScript のデバッグ対策スキル

node.js を使用して webpack をパッケージ化する

webpack で外部モジュールを使用する方法

以上がReact の refs の詳細な説明 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。