今回の記事はTypeScriptベースのReactプロジェクトでReact-Hook-Formを利用してチェックボックスを使用する方法に関してご紹介します。React-Hook-Formを利用することでチェックボックスの選択肢や、選択した行の取得が簡単にできます。そのため、是非活用できるように、困っている方は本記事参考にしていただけると幸いです。
TypeScriptのReactプロジェクト作成
node等がインストールされてない方はインストールして下さい。その前提で話を進めます。
npx create-react-app sample --template typescriptまずは上記で「sample」プロジェクトを作成します。
cd sample
npm startこれでローカルサーバが立ち上がって初期画面が表示できます。
ではReact-Hook-Formをインストールします。
React-Hook-Formのインストール
下記コマンドでインストールできます。
npm install react-hook-formでは、実際にReact-Hook-Formの詳しい使い方入門に関しては別で記事を記載しているので下記記事を参考にしてください。
【React】React-Hook-Formの使い方ご紹介。
React-Hook-Formでチェックボックス実装
最小実装をご紹介します。「src/App.tsx」を編集します。
import { useForm, SubmitHandler } from "react-hook-form";
// フォームの型
type FormData = {
checked: boolean,
};
export default function App() {
// useFormメソッド
const { register, handleSubmit } = useForm<FormData>();
// 送信ボタン押下時処理
const onSubmit: SubmitHandler<FormData> = formData => {
console.log(formData);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label>チェックボックス</label>
{/* チェックボックスフォーム */}
<input
type='checkbox'
{...register('checked', {})}
/>
<input type="submit" />
</form>
);
}解説を行います。
フォームの型は下記です。
type FormData = {
checked: boolean,
};チェックされると「true」、チェックが外れると「false」になる真偽値です。React-Hook-Formが自動で制御してくれます。
送信ボタンは現在のチェックフォームがどのような値になっているかを確認できるようにフォームをコンソールに出力します。
フォームのinputタグでは、下記のようにチェックボックスの記述をしています。
<form onSubmit={handleSubmit(onSubmit)}>
<label>チェックボックス</label>
{/* チェックボックスフォーム */}
<input
type='checkbox'
{...register('checked', {})}
/>
<input type="submit" />
</form>これで「npm start」で動かせば問題なくコンソールにチェックボックスのフォームが出力されていることが確認できると思います。
では今回の記事は終了です。他にも多数のReact関連の記事を記載しているので気になるかたは是非サイト内見ていってください。
コメント