ReactにおけるDOM操作のためのuseRefフックの使用

前回のレッスンの一つで、refが最も頻繁に使用されるのは DOM要素へのアクセスであると述べました。

例えば、要素にフォーカスを当てたり、スクロールを実行したり、そのサイズや位置を計算したり、あるいは何らかのメソッドやプロパティを使用する必要がある場合に、refは役立ちます。なぜなら、Reactにはそのようなことのための組み込みメソッドが存在しないからです。

入力フィールドの例を使って、その方法を見てみましょう。入力フィールドとボタンを持つコンポーネントを作成します：

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

まず、コンポーネントにuseRefをインポートします：

import { useRef } from 'react';

そして、コンポーネント内でrefrefを定義します。値をnullで初期化します：

const ref = useRef(null);

ボタンにクリックイベントハンドラを設定します：

<button onClick={handleClick}>focus</button>

入力フィールドにアクセスできるようにするために、 refrefを入力フィールドのref属性に書き込みます。これにより、Reactがこの入力フィールドのDOMノードを作成する際に、その参照をref.currentに格納し、入力フィールドのメソッドを使用できるようになります：

<input ref={ref} />

最後に、クリックイベントを処理する関数を追加して、ボタンがクリックされたときに、入力フィールドにフォーカスが当たるようにします。これで、refを通じて入力フィールドへの参照が保持されているため、そのfocusメソッドにアクセスして実行できます：

function handleClick() {
	ref.current.focus();
}

ボタンをクリックして、入力フィールドにフォーカスが当たることを確認してください。

このレッスンで作成したAppコンポーネントのコードを使用して、ボタンがクリックされたときに、入力フィールドにフォーカスが当たるだけでなく、入力フィールドの内容もクリアされるようにしてください。そのためには、入力フィールドのvalueプロパティを利用してください。