【Web Library】Nextjs13で覚える便利なライブラリ【#１２useFormik Form】

【#１２useFormik Form】

YouTube: https://youtu.be/txIM1sj5sFs

https://youtu.be/txIM1sj5sFs

今回は「useFormik」の設定を使用して、
入力フォームの作成を行います。

「useFormik」を使用して作成した「formik」の中に、
フォームのサブミット用のメソッドや
入力欄の「onChange」のメソッドや「value」の値がありますので、
こちらを設定していきます。

app/formik/hooks/page.tsx

'use client';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const Page = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validationSchema: Yup.object({
      email: Yup.string().email('Invalid email address').required('Required'),
      password: Yup.string()
        .min(8, 'パスワードは8文字以上を設定してください')
        .required('Required'),
    }),
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <div className="text-white">
      <h1 className="mb-4 text-center text-3xl font-bold">
        Any place in your app!
      </h1>
      <form
        onSubmit={formik.handleSubmit}
        className="flex flex-col items-center gap-2"
      >
        <input
          type="email"
          name="email"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.email}
          className="text-gray-900"
        />
        {formik.touched.email && formik.errors.email ? (
          <div className="text-red-500">{formik.errors.email}</div>
        ) : null}
        <input
          type="password"
          name="password"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.password}
          className="text-gray-900"
        />
        {formik.touched.password && formik.errors.password ? (
          <div className="text-red-500">{formik.errors.password}</div>
        ) : null}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default Page;