【React】複数useRefを指定するときのTips - Qiita

はじめに Reactで map を用いて繰り返しDOMを生成したものに対して useRef を適用したいときのTipsです。 概要 例えば input要素をコンポーネント化してリストにし、その数が動的に変わる かつ その中のinputにアクセスしたい場合は、それぞれのコンポーネントのref指定を少し工夫をする必要があります。 今回は、 focusボタンを押すと、最後のinput要素にフォーカスされるようにする 削除ボタンを押すと、対象のinput要素をクリアしてフォーカスする というのを例に挙げて、mapでDOMを生成したものに対してそれぞれuseRefを適用する方法を解説します。 実装 上記の動きを実装すると、以下のようなコードとなります。 import { useRef, createRef, forwardRef, RefObject } from 'react' export de