1.refはどんな場合に使いますか。

特定のDOMで動作する必要がある場合はrefを使用します.
すなわち、DOMに直接触れなければならない場合はrefを用いる
stateを使用すると必要な機能が実現されますが、stateのみで解決できない機能もあります.

フォーカス特定inputサイクル

操作

スクロールバー

Canvas要素に絵を描くなど...

2.refの使用

次の例は、CLASS構成部品に適用されます.

コールバック関数を使用してrefを設定する

refというコールバック関数をpropsとしてrefを追加したい要素に渡せばよい.

<input ref={ref=>{this.input=ref}}/>

this.Inputとは、input要素のDOMを指す.refの名前は任意に指定できます.

createRefでrefを設定する

これは反応器に内蔵されたcreateRef関数を用いたものである.

import React, { Component } from "react";

class RefTest extends Component {
  input = React.createRef();

  handleFocus = () => {
    this.input.current.focus();
  };

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

export default RefTest;

React.必要な変数名にcreateRef()を含める必要があります.次に、このメンバー変数をref propsとしてrefを追加したい要素に配置すると適用されます.

3.refを構成部品に適用する

使用方法

<RefComponent ref={ ref => {RefComponent = ref}}/>

使用例

コールバック関数を用いてrefを設定した.
App.js

ScrollBox.js