ホームページ > 記事 > ウェブフロントエンド > React の refs の詳細な説明 (詳細なチュートリアル)
React の refs の詳細な説明 (詳細なチュートリアル)
- 亚连オリジナル
- 2018-06-05 17:53:441561ブラウズ
この記事では主に React での refs の使い方についてのチュートリアルを紹介しますので、参考にしてください。
ref は React の属性です。レンダー関数がコンポーネントのインスタンスを返すとき、次のコードに示すように、レンダー内の仮想 DOM ノードに ref 属性を追加できます。コードによれば、render 関数は e388a4556c0f65e1904146cc1a846bee タグを 1 つだけ返し、d5fd7aea971a85678ba271703566ebfd タグの属性には ref 属性が追加されます。公式ドキュメントでは、ref 属性について次のように説明されています:
ref 属性React は、render() によって出力されたコンポーネントにバインドするために使用できる非常に特別な属性をサポートしています。この特別なプロパティを使用すると、render() によって返される対応するバッキング インスタンスを参照できます。これにより、いつでも常に正しいインスタンスを取得できるようになります。
d5fd7aea971a85678ba271703566ebfd タグに ref 属性を設定する目的は何ですか?以下は公式ドキュメントによる説明です:
他のコード (通常はイベント処理コード) では、this.refs を通じてバッキング インスタンス (バッキング インスタンス) を取得します。 this.refs.input のようになります。このうち「input」は、上記でd5fd7aea971a85678ba271703566ebfdタグに設定した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['username'].getDOMNode(); var usernameDOM = React.findDOMNode(this.refs['username']);
レンダリング関数では、10 個の入力ボックスがボディ部分に追加されます。各入力ボックスの ref 属性はすべて ["index" +index] に設定され、上部の入力ボックスの handleChange 関数で入力された数値を取得し、ref 属性の値を取得します。 ref 属性の値に基づいて、対応する実際の DOM ノードを見つけて、その DOM ノードにフォーカスを取得します。
上記は私があなたのためにまとめたものです。
関連記事:
js の経験を共有する JavaScript のデバッグ対策スキルnode.js を使用して webpack をパッケージ化するwebpack で外部モジュールを使用する方法以上がReact の refs の詳細な説明 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。