👌

React × TypeScript で複数の ref を使用する方法

2022/07/11に公開

概要

2つ以上のフォームを用いる際に、複数の入力データを扱うための ref を定義する方法を記載する。

環境

  • Windows 10 Home
  • Node 16.14.0
  • npm 8.5.1
  • npx 8.5.1
  • React ^18.2.0

実装を想定する場面例

今回は、以下のようなログイン画面に存在する2つのフォームの入力データを扱うことを想定している。
想定する実装画面例

入力データを扱うための実装手順

  1. useRefを使用してrefを配列で定義
  2. inputタグにrefを定義する
  3. buttonをクリックすることでフォーム内の入力データを表示する

上記を踏まえたコードは以下のようになる。

SignIn.tsx
・・・
export const SignIn: FC = memo(() => {
  const refs = useRef<RefObject<HTMLInputElement>[]>([]);
  ・・・
  return (
    ・・・
    <input ・・・ ref={refs.current[0]} />
    <input ・・・ ref={refs.current[1]} />
    <button ・・・ onClick={() => console.log(refs.current[0]?.value, refs.current[1]?.value)}>
      SignIn
    </button>
    ・・・
  )
})

以上を実装した後、フォームに入力をし、ボタンをクリックすればコンソール上に入力内容が表示されていれば正常に動作している。

参考記事

https://qiita.com/FumioNonaka/items/feb2fd5b362f2558acfa
https://qiita.com/mackie0122/items/4ad6ca24102139dfc56a
https://qiita.com/tonio0720/items/c265b9b65db3bb76f2d3

Discussion