表单

</> `Form:` Component

注意：该组件目前处于测试阶段

¥Note: This component is currently in BETA

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

¥This component is optional and it takes care of the form submission by closely aligning with the standard native form.

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

¥By default, we will send a POST request with your form submission data as FormData. You can supply headers prop to avoid FormData to be submitted and use application/json instead.

逐步增强你的形态。

¥Progressively enhancement for your form.
同时支持 React Web 和 React Native。

¥Support both React Web and React Native.
负责表单提交处理。

¥Take care of form submission handling.

<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
/>

属性

¥Props

所有属性都是可选的

¥All props are optional

名称	类型	描述
`control`	`Control`	通过调用 `useForm` 提供的 `control` 对象。使用 `FormProvider` 时可选。
`children`	`React.ReactNode`
`render`	`Function`	适用于无头组件的渲染属性功能。
`onSubmit`	`Function`	验证成功后调用的函数。
`onSuccess`	`Function`	成功向服务器请求后调用的函数。
`onError`	`Function`	向服务器请求失败后调用的函数。将调用 `setError` 函数来更新错误状态。`root.server` 将用作错误键。
`headers`	`Record<string, string>`	请求标头对象。
`validateStatus`	`(status: number) => boolean`	验证状态代码的函数。

RULES

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

¥If want to prepare or omit submission data, please use handleSubmit or onSubmit.

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

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

¥Progressive Enhancement only applicable for SSR framework.

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>

示例：

¥Examples:

反应网络

¥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>
      }}
    />
  )
}

表单

</> Form: Component

属性

</> `Form:` Component