ReactのRefについて解説

この記事の最終更新日: 2023年11月23日

Reactは通常、データフローを通じてUIを更新しますが、場合によってはDOM要素へ直接アクセスする必要があります。このブログ記事では、Reactのrefを使ってDOM要素に直接アクセスする方法について解説します。

Refとは？
Refの作成
Refの使用例
Refの注意点
まとめ

Refとは？

Ref（参照）は、Reactコンポーネント内のDOMノードまたはReact要素に「参照」（直接のアクセス権）を提供します。これにより、通常のデータフローの外で、DOM要素を直接操作できます。

Refの作成

Reactでは、React.createRef()メソッドを使用してrefを作成します。クラスコンポーネント内で、通常はコンストラクタ内でこれを行います。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef} />;
  }
}

Refの使用例

フォーカスの制御

フォーム要素に自動的にフォーカスを当てることが一般的な使用例です。

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focus();
  }

  render() {
    return <input type="text" ref={this.textInput} />;
  }
}