React の Ref と DOM を理解する: DOM 要素へのアクセスと操作

React の Ref と DOM: DOM 要素へのアクセスと操作

React では、refs は DOM 要素 に直接アクセスして対話するために使用されます。 React は通常、state と props を通じて宣言的な方法で DOM を管理しますが、アニメーション、フォーム フィールドのフォーカス、要素の寸法の測定など、DOM と直接対話する必要がある場合があります。このような場合、ref は基礎となる DOM ノードにアクセスする方法を提供します。

---

1. React の Ref とは何ですか?

ref (reference の略) は、DOM 要素または React コンポーネント インスタンスを参照できるようにするオブジェクトです。 Ref は、クラス コンポーネントの React.createRef() または関数コンポーネントの useRef() を使用して作成できます。通常、Ref は次の目的で使用されます。

• DOM に直接アクセスします (たとえば、入力フィールドにフォーカスしたり、フォーム要素の値を取得したりします)。
• 命令型アニメーションまたはアクションをトリガーします。
• 直接 DOM 操作を必要とするサードパーティ ライブラリと統合します。

---

2. Ref の作成と使用

クラスコンポーネント内:

クラスコンポーネントでは、React.createRef() を使用して参照が作成されます。作成された ref は、ref 属性を介して DOM 要素にアタッチされます。

クラスコンポーネント内の参照の例:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // Create a ref to access the input element
    this.inputRef = React.createRef();
  }

  handleFocus = () => {
    // Access the DOM node directly and focus the input element
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleFocus}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

この例では:

• this.inputRef は React.createRef().
を使用して作成されます。
• ref は に割り当てられます。 ref 属性を介して要素を取得します。
• handleFocus メソッドでは、this.inputRef.current 経由で入力要素にアクセスし、focus() を呼び出してプログラム的に入力フィールドにフォーカスします。

関数コンポーネント内:

関数コンポーネントでは、useRef フックを使用して参照が作成されます。 useRef フックを使用すると、再レンダリング後も保持される変更可能な参照オブジェクトを作成できます。

関数コンポーネントの Ref の例:

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const handleFocus = () => {
    // Access the DOM node directly and focus the input element
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

この例では:

• inputRef は useRef フックを使用して作成されます。
• ref は に添付されます。 ref 属性を使用した要素。
• handleFocus 関数は、inputRef.current を使用して入力要素にアクセスし、focus() を呼び出して入力フィールドにフォーカスします。

---

3. Ref の使用例

a. DOM 要素へのアクセス

Ref は、DOM 要素に直接アクセスして操作するためによく使用されます。たとえば、テキスト入力に焦点を当てたり、要素のサイズを測定したりすることは、refs を使用して簡単に行うことができます。

b.フォーカスの管理

Ref を使用すると、コンポーネントのマウント時や特定のアクションの後に入力フィールドにフォーカスするなど、要素のフォーカスを管理できます。

Ref を使用したフォーカス管理の例:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // Create a ref to access the input element
    this.inputRef = React.createRef();
  }

  handleFocus = () => {
    // Access the DOM node directly and focus the input element
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleFocus}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

この例では、useEffect フックと ref のおかげで、コンポーネントがマウントされるときに入力が自動的にフォーカスされます。

c.アニメーションのトリガーまたはサードパーティのライブラリとの統合

Ref は、サードパーティのライブラリと対話したり、命令型アニメーションをトリガーしたりするためによく使用されます。たとえば、ref を使用してカスタム アニメーションを制御したり、jQuery などの非 React ライブラリを操作したりできます。

d.フォームの検証

Ref を使用して、データを React の状態に保存せずにフォーム データを収集することもでき、リアルタイムの更新を必要としないフォームに簡単な代替手段を提供します。

---

4.複数の要素の Ref の管理

複数の要素を操作する場合、オブジェクトまたは配列に ref を格納して各要素にアクセスできます。

複数の要素の Ref の例:

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const handleFocus = () => {
    // Access the DOM node directly and focus the input element
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

この例では、複数の入力要素が refs の配列を使用して管理され、ボタンを使用して 2 番目の入力にフォーカスします。

---

5.審判対州

ref は DOM と対話する方法を提供しますが、React の state は UI のレンダリングに影響するデータを管理するために使用されます。それぞれをいつ使用するかを理解することが重要です:

• State は 動的レンダリング に使用されます: データが変更され、UI のレンダリング方法に影響を与える場合は、state を使用します。
• Ref は 命令的なアクション に使用されます。DOM 要素と直接対話する必要がある場合 (アニメーションのフォーカス、測定、トリガーなど)、refs.
を使用します。

---

6.結論

React の Ref は、DOM 要素に直接アクセスして操作するための強力な機能です。これらは UI を操作するための必須の方法を提供し、入力フィールドのフォーカス、アニメーションのトリガー、サードパーティ ライブラリとの統合などの操作を可能にします。

React は state と props を使用した宣言的なアプローチを推奨していますが、DOM とのより直接的なやり取りを実行する必要がある場合、ref は不可欠なツールとして機能します。

以上がReact の Ref と DOM を理解する: DOM 要素へのアクセスと操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。