👌
React × TypeScript で複数の ref を使用する方法
概要
2つ以上のフォームを用いる際に、複数の入力データを扱うための ref を定義する方法を記載する。
環境
- Windows 10 Home
- Node 16.14.0
- npm 8.5.1
- npx 8.5.1
- React ^18.2.0
実装を想定する場面例
今回は、以下のようなログイン画面に存在する2つのフォームの入力データを扱うことを想定している。
入力データを扱うための実装手順
- useRefを使用してrefを配列で定義
- inputタグにrefを定義する
- 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>
・・・
)
})
以上を実装した後、フォームに入力をし、ボタンをクリックすればコンソール上に入力内容が表示されていれば正常に動作している。
参考記事
Discussion