このコンポーネントは、コンテキストオブジェクトをホストし、コンテキストをサブスクライブしてuseFormのpropsとメソッドを使用するコンポーネントを許可します。

Props

次の表は、FormProviderに適用され、useFormContextは引数を受け入れません。

名前	型	説明
`...props`	オブジェクト	`FormProvider`は、すべての`useForm`メソッドを必要とします。

ルール

ネストされたFormProviderの使用は避けてください

例

CodeSandbox ^JS

import React from "react"

import { useForm, FormProvider, useFormContext } from "react-hook-form"

export default function App() {
  const methods = useForm()

  const onSubmit = (data) => console.log(data)

  return (
    <FormProvider {...methods}>
      // pass all methods into the context
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  )
}

function NestedInput() {
  const { register } = useFormContext() // retrieve all hook methods

  return <input {...register("test")} />
}

ご支援ありがとうございます

React Hook Formがあなたのプロジェクトで役立つと感じたら、スターを付けてサポートを検討してください。