React での refs の使用に関するチュートリアルの共有-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

React での refs の使用に関するチュートリアルの共有

小云云

Feb 22, 2018 am 09:41 AM

react refs チュートリアル

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

タグを 1 つだけ返し、タグの属性には ref 属性が追加されます。上記の ref 属性の説明は次のとおりです:

ref 属性

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

他のコード (通常はイベント処理コード) では、this.refs.input のように、this.refs を通じてバッキングインスタンス (バッキングインスタンス) を取得します。このうち「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>

ログイン後にコピー

を通して ref について学びましょう。デモの使用:

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

一番上の入力ボックスに 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 が使用されます。 HTML文書の本文部分に入力ボックスを追加し、各入力ボックスのref属性を["index"+index]に設定し、一番上の入力ボックスのhandleChange関数で入力番号と値を取得します。最後に、ref 属性の値に従って、対応する実際の DOM ノードを見つけて、その DOM ノードにフォーカスを取得します。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7674

CakePHP チュートリアル

1393

C# チュートリアル

1207

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

Dewuの使い方のチュートリアル Mar 21, 2024 pm 01:40 PM

Dewu APP は現在非常に人気のあるブランドショッピングソフトウェアですが、ほとんどのユーザーは Dewu APP の機能の使い方を知りません。最も詳細な使用方法のチュートリアルガイドは以下にまとめられています。次に、エディターがユーザーに提供する Dewuduo の概要です。機能の使い方チュートリアルですので、興味のある方はぜひご覧ください！ Dewu の使い方チュートリアル [2024-03-20] Dewu の分割購入方法 [2024-03-20] Dewu クーポンの入手方法 [2024-03-20] Dewu マニュアルのカスタマーサービスの検索方法 [2024-03- 20] デューのピックアップコード確認方法 [2024-03-20] デューの購入場所 [2024-03-20] デューのVIP開放方法 [2024-03-20] デューの返品・交換申請方法

夏はぜひ虹を撮ってみてください Jul 21, 2024 pm 05:16 PM

夏の雨の後には、美しく魔法のような特別な天気の風景、虹がよく見られます。これも写真撮影ではなかなか出会えない光景で、とてもフォトジェニックです。虹が現れるにはいくつかの条件があります。まず、空気中に十分な水滴があること、そして、低い角度から太陽が当たることです。そのため、雨が上がった午後が最も虹が見えやすいのです。ただし、虹の発生は天候や光などの条件に大きく左右されるため、一般に虹の持続時間は短く、見頃や撮影に最適な時間はさらに短くなります。では、虹に遭遇したとき、どうすれば虹を適切に記録し、高品質の写真を撮ることができるでしょうか? 1. 虹を探す上記の条件に加えて、虹は通常、太陽光の方向に現れます。つまり、太陽が西から東に輝いている場合、虹は東に現れやすくなります。

WeChat の支払い音をオフにする方法のチュートリアル Mar 26, 2024 am 08:30 AM

1. まずWeChatを開きます。 2. 右上隅の[+]をクリックします。 3. QR コードをクリックして支払いを受け取ります。 4. 右上隅にある 3 つの小さな点をクリックします。 5. クリックして支払い到着の音声リマインダーを閉じます。

photoshoppcs5とはどんなソフトですか？ -photoshopcs5の使い方チュートリアル Mar 19, 2024 am 09:04 AM

PhotoshopCS は Photoshop Creative Suite の略で、Adobe 社が開発したソフトウェアで、グラフィックデザインや画像処理に広く使用されています。PS を学習する初心者として、今日は photoshopcs5 とはどのようなソフトウェアなのか、そして photoshopcs5 の使い方を説明しましょう。 1. photoshop cs5 とはどのようなソフトウェアですか? Adobe Photoshop CS5 Extended は、映画、ビデオ、マルチメディア分野の専門家、3D やアニメーションを使用するグラフィックおよび Web デザイナー、エンジニアリングおよび科学分野の専門家に最適です。 3D イメージをレンダリングし、それを 2D 合成イメージに結合します。動画を簡単に編集

PHP、Vue、React: 最適なフロントエンドフレームワークを選択するには? Mar 15, 2024 pm 05:48 PM

PHP、Vue、React: 最適なフロントエンドフレームワークを選択するには?インターネット技術の継続的な発展に伴い、フロントエンドフレームワークは Web 開発において重要な役割を果たしています。 PHP、Vue、React は 3 つの代表的なフロントエンドフレームワークであり、それぞれに独自の特徴と利点があります。使用するフロントエンドフレームワークを選択するとき、開発者はプロジェクトのニーズ、チームのスキル、個人の好みに基づいて情報に基づいた決定を下す必要があります。この記事では、PHP、Vue、React の 3 つのフロントエンドフレームワークの特徴と用途を比較します。

専門家が教える！ Huawei携帯電話で長い画像をカットする正しい方法 Mar 22, 2024 pm 12:21 PM

スマートフォンの継続的な発展に伴い、携帯電話の機能はますます強力になり、その中でも長時間の写真を撮る機能は、多くのユーザーが日常生活で使用する重要な機能の1つになりました。長いスクリーンショットは、ユーザーが長い Web ページ、会話記録、または写真を一度に保存して、簡単に表示したり共有したりできるようにするのに役立ちます。数ある携帯電話ブランドの中でも、ファーウェイの携帯電話はユーザーから高く評価されているブランドの一つでもあり、長い写真のトリミング機能も高く評価されています。この記事では、ファーウェイの携帯電話で長い写真を撮る正しい方法と、ファーウェイの携帯電話をより良く活用するための専門的なヒントを紹介します。

Java フレームワークとフロントエンド React フレームワークの統合 Jun 01, 2024 pm 03:16 PM

Java フレームワークと React フレームワークの統合: 手順: バックエンド Java フレームワークをセットアップします。プロジェクト構造を作成します。ビルドツールを設定します。 React アプリケーションを作成します。 REST API エンドポイントを作成します。通信メカニズムを構成します。実際のケース (SpringBoot+React): Java コード: RESTfulAPI コントローラーを定義します。 React コード: API によって返されたデータを取得して表示します。

PHP チュートリアル: int 型を string に変換する方法 Mar 27, 2024 pm 06:03 PM

PHP チュートリアル: Int 型を文字列に変換する方法 PHP では、整数データを文字列に変換するのが一般的な操作です。このチュートリアルでは、PHP の組み込み関数を使用して int 型を文字列に変換する方法を、具体的なコード例を示しながら紹介します。キャストを使用する: PHP では、キャストを使用して整数データを文字列に変換できます。この方法は非常に簡単で、整数データの前に(文字列)を追加するだけで文字列に変換できます。以下は簡単なサンプルコードです

See all articles