はじめに
この記事では、名前入力フォームの実装を通して、 React Hook Form というReact用のフォーム管理ライブラリの基本的な利用方法についてまとめていきます。
開発環境は以下の通りです。
- React Hook Form v7.43.0
- TypeScript v4.9.5
- React v18.2.0
- Windows11
また、React Hook Form導入前に簡単な名前入力フォームコンポーネントを準備しておきます。
function App() {
return (
<form>
<label htmlFor="name">Name: </label>
<input type="text" id="name" name="name" placeholder="Input your Name" />
<input type="submit" />
</form>
);
}
export default App;
インストール
以下のコマンドでReact Hook Fromをインストールします。
npm install react-hook-form
register
まずは register 関数を利用して、最初に作成したコンポーネントでバリデーションやデータ送信など React Hook Form の機能を利用できるようにします。
import { useForm } from "react-hook-form";
function App() {
const { register } = useForm();
return (
<form>
<label htmlFor="name">Name: </label>
<input
type="text"
id="name"
{...register("name")}
placeholder="Input your Name"
/>
<input type="submit" />
</form>
);
}
export default App;
registerの戻り値（以下）をinput要素に渡して利用します。
- name
- ref
- onChange
- onBlur
上記のコードを下記のように書き換えることができます。
import { useForm } from "react-hook-form";
function App() {
const { register } = useForm();
const { name, ref, onChange, onBlur } = register("name");
return (
<form>
<label htmlFor="name">Name: </label>
<input
type="text"
id="name"
name={name}
ref={ref}
onChange={onChange}
onBlur={onBlur}
placeholder="Input your Name"
/>
<input type="submit" />
</form>
);
}
export default App;
registerの引数 = registerの戻り値のnameになります。
handleSubmit
次は、 handleSubmit 関数で入力データを取得します。
import { useForm } from "react-hook-form";
function App() {
const { register, handleSubmit } = useForm();
return (
<form onSubmit={handleSubmit((data) => {
console.log('data: ', data);
})}>
<label htmlFor="name">Name: </label>
<input
type="text"
id="name"
{...register("name", { required: true })}
placeholder="Input your Name"
/>
<input type="submit" />
</form>
);
}
export default App;
取得できることが確認できました。
バリデーション
次は、入力必須のバリデーションを追加します。
バリデーションは、register関数の第二引数で設定します。引数内で入力必須及びエラーメッセージを設定できます。
また、エラーの判断は formState を利用します。formStateの戻り値のひとつであるerrorsでregister関数の第二引数で設定したエラーメッセージを取得できます。
import { useForm } from "react-hook-form";
function App() {
const { register, handleSubmit, formState: { errors } } = useForm();
console.log("errors: ", errors);
return (
<form
onSubmit={handleSubmit((data) => {
console.log("data: ", data);
})}
>
<label htmlFor="name">Name: </label>
<input
type="text"
id="name"
{...register("name", { required: "Please Input your Name" })}
placeholder="Input your Name"
/>
<input type="submit" />
</form>
);
}
export default App;
エラーメッセージが表示されることを確認できました。
デフォルト値
次は、デフォルト値を設定します。デフォルト値は、useFormの引数に設定します。
import { useForm } from "react-hook-form";
function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({ defaultValues: { name: "Mike" } });
console.log("errors: ", errors);
return (
<form
onSubmit={handleSubmit((data) => {
console.log("data: ", data);
})}
>
<label htmlFor="name">Name: </label>
<input
type="text"
id="name"
{...register("name", { required: "Please Input your Name" })}
placeholder="Input your Name"
/>
<input type="submit" />
</form>
);
}
export default App;
デフォルト値が設定されました。
デフォルト値を設定しておくと、register関数の引数を誤った値にした時にTypeScriptがエラーを出してくれます。
watch
最後に watch 関数を利用して、入力値をリアルタイムで表示します。
引数にinputのnameを渡すと、対象のinputの値を取得します。引数を渡さなければ、全ての値を取得します。
import { useForm } from "react-hook-form";
function App() {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm({ defaultValues: { name: "" } });
console.log("errors: ", errors);
const name = watch("name");
return (
<form
onSubmit={handleSubmit((data) => {
console.log("data: ", data);
})}
>
<label htmlFor="name">Name: </label>
<input
type="text"
id="name"
{...register("name", { required: "Please Input your Name" })}
placeholder="Input your Name"
/>
<p>{name}</p>
<input type="submit" />
</form>
);
}
export default App;
入力値をリアルタイムで表示させることができました。
最後に
名前入力フォームの実装を通してReact Hook Form の基本的な利用方法についてまとめてみました。導入は順調にできたので、より細かな部分も今後学んでいければと思っています。
最後までお読みいただきありがとうございました！