</> `Form:` 组件

注意: 此组件目前处于测试版

此组件是可选的，它通过与标准原生表单紧密结合来处理表单提交。

默认情况下，我们将使用您的表单提交数据发送 POST 请求作为 FormData。您可以提供 headers 属性以避免提交 FormData 并改为使用 application/json。

渐进式增强您的表单。
支持 React Web 和 React Native。
处理表单提交。

<Form
  action="/api"
  method="post" // default to post
  onSubmit={() => {}} // function to be called before the request
  onSuccess={() => {}} // valid response
  onError={() => {}} // error response
  validateStatus={(status) => status >= 200} // validate status code
/>

属性

所有属性都是可选的

名称	类型	描述	示例
`control`	`控制`	`control` 对象由调用 `useForm` 提供。在使用 `FormProvider` 时可选。	<Form control={control} />
`children`	`React.ReactNode`
`render`	`函数`	适合无头组件的渲染属性函数。	<Form render={({ submit }) => <View/>} />
`onSubmit`	`函数`	在成功验证后调用的函数。	<Form onSubmit={({ data }) => mutation(data)} />
`onSuccess`	`函数`	成功向服务器请求后调用的函数。	<Form onSuccess={({ response }) => {}} />
`onError`	`函数`	服务器请求失败后调用的函数。 `setError` 函数将被调用以更新错误状态。`root.server` 将用作错误键。	<Form onError={({ response }) => {}} />
`headers`	`Record<string, string>`	请求头对象。	<Form headers={{ accessToken: 'xxx', 'Content-Type': 'application/json' }} />
`validateStatus`	`(status: number) => boolean`	用于验证状态码的函数。	<Form validateStatus={status => status === 200} />

规则

如果想准备或省略提交数据，请使用 handleSubmit 或 onSubmit。

const { handleSubmit, control } = useForm();
const onSubmit =(data) => callback(prepareData(data))
<form onSubmit={handleSubmit(onSubmit)} />
// or
<Form
  onSubmit={({ data }) => {
    console.log(data)
  }}
/>

渐进式增强仅适用于 SSR 框架。

const { handleSubmit, control } = useForm({
  progressive: true
});

<Form onSubmit={onSubmit} control={control} action="/api/test" method="post">
  <input {...register("test", { required: true })} />
</Form  />

// Renders

<form action="/api/test" method="post">
  <input required name="test" />
</form>

示例

React Web

import { useForm, Form } from "react-hook-form"

function App() {
  const {
    control,

    register,

    formState: { isSubmitSuccessful, errors },
  } = useForm({
    // progressive: true, optional prop for progressive enhancement
  })

  return (
    <div>
      // Use action prop to make post submission with formData
      <Form
        action="/api"
        control={control}
        onSuccess={() => {
          alert("Success")
        }}
        onError={() => {
          alert("error")
        }}
      >
        {" "}
        <input {...register("name")} />
        {isSubmitSuccessful && <p>Form submit successful.</p>}
        {errors?.root?.server && <p>Form submit failed.</p>} <button>submit</button>
      </Form>
      // Manual form submission
      <Form
        onSubmit={async ({ formData, data, formDataJson, event }) => {
          await fetch("api", {
            method: "post",

            body: formData,
          })
        }}
      >
        {" "}
        <input {...register("test")} /> <button>submit</button>
      </Form>
    </div>
  )
}

React Native

import { useForm, Form } from "react-hook-form"
function App() {
  const {
    control,
    register,
    formState: { isSubmitSuccessful, errors },
  } = useForm()
  return (
    <Form
      action="/api"
      control={control}
      render={({ submit }) => {
        ;<View>
          {isSubmitSuccessful && <Text>Form submit successful.</Text>}

          {errors?.root?.server && <Text>Form submit failed.</Text>}
          <Button onPress={() => submit()} />
        </View>
      }}
    />
  )
}

感谢您的支持

如果您发现 React Hook Form 对您的项目有用，请考虑为它点赞并支持它。

表单

</> Form: 组件

属性

感谢您的支持

</> `Form:` 组件