問題一覧に戻る
中級高度なパターン
問題64: ref基礎

useRefを使用してDOM要素への参照を取得し、直接操作する方法を学びます。フォーカス管理、スクロール位置の制御、アニメーションの実行など、DOM APIへの直接アクセスが必要な場面で使用します。currentプロパティでDOM要素にアクセスし、ネイティブメソッドを呼び出せます。refの変更は再レンダリングを引き起こさないため注意が必要です。

import React, { useRef } from 'react';

function Focus() {
  {/* refを作成 */}
  const inputRef = ();

  const focusInput = () => {
    {/* DOMにアクセス */}
    inputRef..focus();
  };

  return (
    <div>
      {/* refをアタッチ */}
      <input ={inputRef} />
      <button onClick={focusInput}>Focus</button>
    </div>
  );
}

export default Focus;
···