React useRefの使い方!DOM操作が可能に!





けど、そんな中で悩むことは、

・React HooksのuseRefの使い方がわからない
・React HooksのuseRefでDOMを操作する方法がわからならい

ですよね。

今回はそんなお悩みを解決する

・React HooksのuseRefの使い方
・React HooksのuseRefでDOMを操作する方法

についてまとめます!

React HooksのuseRefのとは

useRefは、React Hooksの関数コンポーネントで、追加のフックに位置します。機能としては2パターンあります。
1つ目が値の保持です。useRefは仮想DOM上に値を保持することができます。useStateと近いものと思ってよいでしょう。

2つ目がDOMの参照です。DOMとはJavascript本体のドキュメントインターフェースで、Reactにはなくて本体のJavascriptにある機能や値を参照することができます。

タカヒロ
タカヒロ
ちなみにRefは REFERENCE (参照)を意味します。

React HooksのuseRefの使い方

React HooksのuseRefの使い方について説明をします。

React HooksのuseRefの構文と引数

React HooksのuseRefの構文と引数は以下の通りです。

React HooksのuseRefの構文

useRef(<第1引数>);

React HooksのuseRefの引数

第1引数 保持させたい値や関数を指定します。
.currentプロパティが渡された引数を返しますので.currentを付けて値を取得する必要があります。

React HooksのuseRefを実装する

React HooksのuseRefを実装するにはuseRefをimportします。

import { useRef, useState } from "react"

React HooksのuseRefでコンポーネント内で値を保持、取得する

まずは、React HooksのuseRefでuseStateのようにコンポーネント内での値を保持し、フォームから参照して取得してみましょう。
以下サンプルコードです。

import { useRef }  from "react"

function App() { 

const value2 = useRef("useRefテスト入力");

console.log(value2)

  return (
    <div>
      <input type="text" value={value2.current} />
    </div>
  );
}

export default App;

useRefへ代入した値がフォームに表示されていますね。

useRefは、.currentプロパティを介して値をオブジェクトに返しますので、.currentを付ける必要があります。

React HooksのuseRefでDOMを参照し機能を使用する

React HooksのuseRefでDOMを参照し、Reactにはないfocus機能を使用してみましょう。

以下サンプルコードです。

import { useState, useRef }  from "react"

function App() { 

const [value1, setValue] = useState("useStateテスト入力");
//const value2 = useRef("useRefテスト入力");
const inputRef = useRef();

console.log(inputRef)

  return (
    <div>
      <input type="text" ref={inputRef} value={value1} onChange={(element) => setValue(element.target.value)} />
      <button onClick={() => inputRef.current.focus()}>フォーカスします</button>
    </div>
  );
}

export default App;

まず表示すると、コンソールログからcurrentプロパティにinput要素が渡っていることが確認できますね。

ボタンをクリックしてみましょう。

はい、入力フォームにフォーカスされましたね!

ref属性にinputRefを渡した際に、currentプロパティにinput要素が渡る形になります。

<input type="text" ref={inputRef}

そのcurrentプロパティにfocusメソッドを使用することにより、対象オブジェクトがフォーカスされるということになります。

<button onClick={() => inputRef.current.focus()}>

さいごに

いかがでしょうか。

今回は、

・React HooksのuseRefの使い方
・React HooksのuseRefでDOMを操作する方法

についてまとめました。

また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。


タカヒロ
タカヒロ
Reactって覚えることが多く難しいですよね...
タカヒロも悩んでいましたが、こちらの本でかなり理解ができるようになりました!


>>Amazonで詳細を見る


電子書籍もいいですが、紙質がやわらかく読みやすいので書籍のほうがおすすめです。


この記事の関連キーワード

こちらの記事の関連キーワード一覧です。クリックするとキーワードに関連する記事一覧が閲覧できます。