React Hook Formの基本まとめその4（formProviderで親子間でフォーム情報をやりとりする)

こんにちは！今回はReact Hook Formの基本まとめの4回目（最終回）です。 formProvider 親コンポーネント import { useForm, FormProvider } from 'react-hook-form' import ChildComponent from '/ChildComponent'; const ParentForm = () => { const meth…

2024-10-20

React Hook Formの基本まとめその3 （Material UIなどを使うためのControllerパターン）

こんにちは！今回は前々回、前回に引き続きReact Hook Form (RHF) についてまとめます。 Controllerパターン RHFの ...register で input タグをRHFの管理下に置くやり方は、HTMLの基本的なタグにしか使用できない理由は、onChangeや onBlur、onRef などの…

2024-10-20

React Hook Formの基本まとめその2 （zodと組み合わせるパターン）

こんにちは！今回は前回に引き続き、React Hook Form (RHF) についてまとめます。 zodと組み合わせるパターン import { useForm } from 'react-hook-form' import { z } from 'zod' import { zodResolver } from '@hookform/resolvers/zod' const schema = …