跳至内容

useFormContext

React Context API for hook form

</> useFormContext: 函数

此自定义钩子允许您访问表单上下文。useFormContext 旨在用于深度嵌套的结构中，在这些结构中，将上下文作为道具传递会变得不方便。

返回值

此钩子将返回所有 useForm 返回方法和道具。

const methods = useForm()


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


const methods = useFormContext() // retrieve those props
规则

您需要使用 FormProvider 组件包装您的表单，才能使 useFormContext 正常工作。

示例

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 在您的项目中很有用，请考虑加星并支持它。