React-Hook-Form APIを使って、ボタンによるフォーム値の操作を行ってみた

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

react-hook-formはReact用のフォームバリデーションライブラリになります。一から実装するよりも、フォーム値の管理や検証が容易になります。ドキュメントも見やすく、人気の高いライブラリです。

今回は、react-hook-formで提供されているAPIをいくつか使用して、ボタンによるフォームの操作を、簡単にまとめてみました。

基本的な使用方法

Next.jsプロジェクトを作成します。

npx create next-app --ts

プロジェクトに移動し、react-hook-formをインストールします。

yarn add react-hook-form

register

react-hook-formでは、useFormフックを使用して、フォームの値を管理します。

register()の引数に、フォームタグで管理したい値を指定することで、バリデーションなどのオプションを適用できます。

/pages/index.tsx

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type Inputs = {
  text: string;
};

export default function Index() {
  const {
    register,
    handleSubmit,
  } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data.text);

  return (
    <form onSubmit={handleSubmit(onSubmit)} style={{margin: "50px"}}>
      <input {...register("text")} style={{margin: "20px"}} />
      <input type="submit" />
    </form>
  );
}

基本的なフォーム

setValue

ボタンを押すことで、入力値の値を更新できるようにします。setValueを使用することで、フォームの値を更新します。

/pages/index.tsxを以下のように変更します。

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type Inputs = {
  text: string;
};

export default function Index() {
  const { register, handleSubmit, setValue } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data.text);

  const changeTextValue = (value: string) => {
    setValue("text", value);
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)} style={{ margin: "50px" }}>
        <input {...register("text")} style={{ margin: "20px" }} />
        <input type="submit" />
        <div>
          {["orange", "grape", "banana"].map((value) => {
            return (
              <button
                style={{ margin: "10px" }}
                key={value}
                onClick={() => changeTextValue(value)}
              >
                {value}
              </button>
            );
          })}
        </div>
      </form>
    </>
  );
}

getValues

getValues()は、現在のフォームの値を取得することができます。こちらを利用することで、フォーム値を連結します。watch()も同様の挙動を示しますが、getValuesの方が不要なレンダリングを防ぎ、パフォーマンスが良いと思います。

index.tsxのchangeTextValue()の中身を変更。

index.tsx

  const { register, handleSubmit, setValue, getValues } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data.text);

  const changeTextValue = (value: string) => {
    const currentText = getValues("text")

    setValue("text", currentText === "" ? value : `${currentText},${value}`);
  };

resetField

resetField（）を使用すると、指定したフォームの値を初期値に戻すことができます。引数に、リセットしたい値を指定します。

  const { register, handleSubmit, setValue, getValues, resetField } = useForm<Inputs>();

  ...

  const resetTextValue = () => {
    resetField("text");
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)} style={{ margin: "50px" }}>
        <input {...register("text")} style={{ margin: "20px" }} />
        <input type="submit" />
        <div>
          {["orange", "grape", "banana"].map((value) => {
            return (
              <button
                style={{ margin: "10px" }}
                key={value}
                onClick={() => addText(value)}
              >
                {value}
              </button>
            );
          })}
          <button
            onClick={resetTextValue}
            style={{ margin: "10px", background: "gray", color: "#fff" }}
          >
            クリア
          </button>
        </div>
      </form>
    </>
  );
}

また、フォームが複数ある場合に、全てのフォームをまとめて初期化するreset()も提供されています。

まとめ

今回はreact-hook-formのAPIを使用して、ボタンによる入力値操作を実装してみました。もちろん、今回紹介したAPIは一部で、他にも便利なAPIが提供されています。内容は初心者向きですが、誰かの役に立てばと思います。

ではまた。