Reactの参照のためのガイド

React.jsを使用する場合、DOM要素と直接対話する命令型コードを記述するためにエスケープハッチが必要になることがあります。 ReactのcreateRefメソッドを使用すると、まさにそれが可能になります。

Reactは、React.createRef()を使用してDOMノードへの参照を取得する方法を提供します。これは、実際には、この非常に馴染みのあるJavaScriptのスニペットと同等です。

document.getElementById('foo-id');

これはReact.createRef()が行うこととまったく同じですが、少し異なる設定が必要です。

使用法

DOMノードへの参照を取得するには、次の2つのことを行う必要があります。

import React, { Component } from 'react';

class Foobar extends Component {
  constructor(props) {
    super(props);
    this.myInput = React.createRef();    // initialize "this.myInput"  
  }

  render() {
    return (
      <input ref={this.myInput}/>        {/* pass "this.myInput" as prop */}
    );
  }
}

Reactのすべての標準HTML要素には、refと呼ばれる予約済みの小道具があります（予約済みの小道具であるstyleとよく似ています）。コンストラクターで初期化した参照をrefプロップに渡すだけです…そして出来上がり！ this.myInput.currentを使用して、<input>DOMノードとの対話を開始できます。

this.myInput.currentはDOMノードへの参照を保持します

例：フォーカシング

最後のコードスニペットを使用して、<input>DOMノードとの対話を開始する方法を示すために少し調整してみましょう。

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.myInput = React.createRef();  
  }
  render() {
    return (
      <div>
        <input ref={this.myInput}/>

        <button onClick={() => {
          this.myInput.current.focus();
        }}>
          focus!
        </button>
      </div>
    );
  }
}

focus()メソッドの呼び出しは、React.jsのことではありません…通常のJavaScriptのことです！ 💃🏻💃🏻たとえば、これはバニラJavaScriptで行われる方法です：

document.getElementById('myInput').focus();

HTMLメディア要素の制御

React.createRef()と標準のJavaScript<video> APIを使用して、再生を制御することもできます。

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.myVideo = React.createRef();
  }
  render() {
    return (
      <div>
        <video ref={this.myVideo} width="320" height="176" controls>
          <source src="https://blender.com/big-buck-bunny.mp4" type="video/mp4" />
        </video>
        <div>
          <button onClick={() => {
            this.myVideo.current.play();
          }}>
            Play
          </button>
          <button onClick={() => {
            this.myVideo.current.pause();
          }}>
            Pause
          </button>
        </div>
      </div>
    );
  }
}

useRefを使用したReactフック付きの参照

React Hooksの参照は、classコンポーネントと大差ありません。これは、useRefフックを使用して実現されます。 thisを省略することを忘れないでください、そうすればあなたは黄金になります🙌

import React, { useRef } from "react";

function App() {

  const myInput = useRef(null);

  return (
    <div>
      <input ref={myInput}/>
      <button onClick={() => {
        myInput.current.focus();
      }}>
        focus!
      </button>
    </div>
  );
}

使用できませんcreateRef状態やライフサイクルコンポーネントなどのReact-y機能の多くが欠けているため、純粋関数コンポーネントの場合

✈️createRef()の詳細については、Reactドキュメントにアクセスしてください。