Zenn
😂

React Hooksの10種類を理解する（Additional: useRef）

2021/08/02に公開
React
React Hooks
tech

React Hooksの10種類を理解する（Additional: useRef）

ReactとRefとの関係性（おさらい、公式より抜粋）

refとは

  • Refは、renderメソッドで作成されたDOMノードまたはReact要素にアクセスする方法を提供するもの。

refの使用状況

  • フォーカス、テキストの選択及びメディア再生の管理
  • アニメーションの発火
  • サードパーティのDOMライブラリとの統合

refの作成

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}
  • React.createRef()を使用して作成され、ref属性を用いてReact要素に紐付けられる。

refへのアクセス

const node = this.myRef.current;
  • HTML要素に対してref属性が使用されている場合、React.createRef()を用いてconstructor内で作成されたrefは、そのcurrentプロパティとして根底にあるDOM要素を受け取る。
  • ref属性がcustom class-componentで使用されるとき、refオブジェクトはcomponentのmountされたinstanceをcurrentとして受け取る。
  • refの更新は``componentDidMountまたはcomponentDidUpdate`ライフサイクルメソッドの前に行われる。

DOM要素へのRef追加

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

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

  render() {
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

関数コンポーネント

  • defaultでは、関数コンポーネントにref属性を使用することはできない（インスタンスがないため）。ただし、DOM要素またはクラスコンポーネントを参照している限り、関数コンポーネント内でref属性を使用することはできる。
function CustomTextInput(props) {
  // ref が参照できるように、textInput をここで宣言する必要があります。
  const textInput = useRef(null);
  
  function handleClick() {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}

reference

GitHubで編集を提案

Discussion