#73 7-8 フックの自作

[MofuMofu2]

あんまわかってない感じなのでGPT-4に食わせて説明してもらった。なんか使ってみないといまいち説明できなさそう。

ファイルの内容を基に、UseForm.ts カスタムフックの利用方法と FormRadio.tsx コンポーネントでのインポート方法について説明します。

UseForm.ts カスタムフック

このファイルは、useForm というカスタムフックを定義しています。このフックは、ジェネリック型 T を受け取り、初期値 initialValues を使用してフォームの状態を管理します。フックは状態 values と、フォームフィールドの変更を処理する handleChange 関数を返します。

使用方法

1. useStateの初期化: useState を使用して、ジェネリック型 T の初期値でフォームの状態を初期化します。

2. handleChange関数: フォームフィールドの値が変更されたときに呼び出される関数。イベントから name と value を取り出し、それを使用して状態を更新します。

3. 返り値: values（現在のフォームの値）と handleChange 関数をオブジェクトとして返します。

FormRadio.tsx コンポーネント

このファイルは、FormRadio コンポーネントを定義しており、useForm カスタムフックを使用しています。

インポートと利用

1. useFormのインポート: FormRadio.tsx で useForm をインポートします。これは import useForm from "./UseForm"; という形で行われています。

2. useFormの使用: useForm フックをコンポーネント内で呼び出し、初期値（この場合は { os: "windows" }）を渡しています。フックから返される values と handleChange を分割代入して使用します。

3. フォーム要素のレンダリング: コンポーネントでは、values を使用してラジオボタンの選択状態を管理し、handleChange をラジオボタンの onChange イベントハンドラとして使用します。

コード例

import React from "react";
import useForm from "./UseForm";

export default function FormRadio() {
  // useFormの引数に初期値を渡す
  const { values: form, handleChange: handleForm } = useForm({ os: "windows" });

  return (
    <>
      <form>
        {/* 省略 */}
        <input
          id="os_win"
          name="os"
          type="radio"
          value={"windows"}
          checked={form.os === "windows"}
          onChange={handleForm}
        />
        {/* 省略 */}
      </form>
    </>
  );
}

このように、FormRadio コンポーネントは useForm カスタムフックを利用して、フォームの状態管理とイベントハンドリングのロジックを簡潔に実装しています。

[MofuMofu2]

状態も共通化できるっていうのがVue.js（Vue.2.x）のmixinsと同じ香りを感じる…。 TypeScriptでテンプレートを返すところからジャンプできるから許せるが、mixinsみたいにジャンプしどころがわかんないと絶許になっちゃうやつだなと思った。