【React Hook Form + Yup】同じページに2つのフォームを配置する方法

方法１.同じページ内で分ける

  const schema1 = yup.object({
    inputSchema1: yup.string().required("必須項目です1"),
  });
  const schema2 = yup.object({
    inputSchema2: yup.string().required("必須項目です2"),
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema1),
  });

  const {
    register: register2,
    handleSubmit: hundleSubmit2,
    formState: { errors: errors2 },
  } = useForm({
    resolver: yupResolver(schema2),
  });

  const onSubmit1 = (data: any) => {
    console.log(data);
    console.log("1個目のフォームを送信したときはこっち");
  };
  const onSubmit2 = (data: any) => {
    console.log(data);
    console.log("2個目のフォームを送信したときはこっち");
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit1)}>
        <div>
          <input placeholder="任意項目" {...register("inputSchema1")} />
        </div>
        <p>{errors.inputSchema1?.message}</p>
        <button type="submit">送信1</button>
      </form>
      <form onSubmit={hundleSubmit2(onSubmit2)}>
        <div>
          <input placeholder="任意項目" {...register2("inputSchema2")} />
        </div>
        <p>{errors2.inputSchema2?.message}</p>
        <button type="submit">送信2</button>
      </form>
    </div>
  );

方法2.コンポーネントごと分ける

各フォームをコンポーネント化して、呼び出す。

import Form2 from "./_components/Form2";
import Form1 from "./_components/form1";

export default function Home() {
  return (
    <>
      <Form1 />
      <Form2 />
    </>
  );
}

1つのFormをコンポーネント化すると、useFormから取得する関数やオブジェクトに別々の名前を振らなくて良い。

import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

function Form1() {
  const schema = yup.object({
    inputSchema: yup.string().required("必須項目です1"),
  });
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data: any) => {
    console.log(data);
    console.log("1個目のフォームを送信したときはこっち");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <input placeholder="任意項目" {...register("inputSchema")} />
      </div>
      <p>{errors.inputSchema?.message}</p>
      <button type="submit">送信1</button>
    </form>
  );
}

export default Form1;

まとめ

個人的には、コンポーネント化したほうがみやすくて好き