</> `useFormContext:` 関数

このカスタムフックを使用すると、フォームコンテキストにアクセスできます。useFormContextは、コンテキストをプロップとして渡すことが不便になるような、深くネストされた構造で使用することを想定しています。

戻り値

このフックは、useFormの戻り値となるすべてのメソッドとプロップを返します。

const methods = useForm()

<FormProvider {...methods} /> // all the useForm return props

const methods = useFormContext() // retrieve those props

ルール

useFormContextが正常に機能するには、フォームをFormProviderコンポーネントでラップする必要があります。

例

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が役立つと感じた場合は、スターを付けてサポートしてください。

useFormContext

</> useFormContext: 関数

戻り値

サポートありがとうございます

</> `useFormContext:` 関数