diff options
author | Masaya Tojo <masaya@tojo.tokyo> | 2024-09-01 22:36:21 +0900 |
---|---|---|
committer | Masaya Tojo <masaya@tojo.tokyo> | 2024-09-01 22:36:21 +0900 |
commit | 71abc48fd4525b9194df848a6915ab4dfc11c354 (patch) | |
tree | e736f111b82921ac730195e7aa9036af9a824005 /src/SignUpForm2.tsx | |
parent | 1d3b5fcf0dc02557aa2eba02074ec84bd497a768 (diff) |
確認画面まで作成する
Diffstat (limited to 'src/SignUpForm2.tsx')
-rw-r--r-- | src/SignUpForm2.tsx | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/src/SignUpForm2.tsx b/src/SignUpForm2.tsx index 1824fd6..f355225 100644 --- a/src/SignUpForm2.tsx +++ b/src/SignUpForm2.tsx @@ -1,9 +1,49 @@ import './SignUp.css' +import { useForm } from 'react-hook-form' +import { zodResolver } from "@hookform/resolvers/zod" +import { useLocation, Navigate, useNavigate } from 'react-router-dom'; +import { Form1, Form2, form2Schema } from './signUpSchema' export const SignUpForm2 = () => { + const { register, handleSubmit, formState: { errors } } = useForm<Form2>({ + resolver: zodResolver(form2Schema), + }); + const location = useLocation(); + const form1 = location.state as Form1 | null; + const navigate = useNavigate(); + + // form1 のデータがない場合は form1 にリダイレクトする + if (form1 === null) { + return <Navigate replace to="/sign-up/form1" /> + } + + const onsubmit = (form2: Form2) => { + const state = { + ...form1, + ...form2, + } + navigate('/sign-up/confirm', { state }) + } + const onerror = (err: any) => console.log(err); + return ( <> <h1>会員登録 フェーズ 2</h1> + <form className="SignUpForm" onSubmit={handleSubmit(onsubmit, onerror)}> + <div> + <label htmlFor="email">メールアドレス: </label> + <input id="email" type="email" {...register('email')}></input> + <div className="error">{errors.email?.message}</div> + </div> + <div> + <label htmlFor="password">パスワード: </label> + <input id="password" type="password" {...register('password')}></input> + <div className="error">{errors.password?.message}</div> + </div> + <div> + <button type="submit">確認画面へ</button> + </div> + </form> </> ); } |