handleSubmit

</> `handleSubmit:` `((data: Object, e?: Event) => Promise<void>, (errors: Object, e?: Event) => Promise<void>) => Promise<void>`

如果表单验证成功，此函数将接收表单数据。

¥This function will receive the form data if form validation is successful.

属性

¥Props

名称	类型	描述
SubmitHandler	`(data: Object, e?: Event) => Promise<void>`	回调成功。
SubmitErrorHandler	`(errors: Object, e?: Event) => Promise<void>`	错误回调。

RULES

你可以使用 handleSubmit 轻松异步提交表单。

¥You can easily submit form asynchronously with handleSubmit.

handleSubmit(onSubmit)()

// You can pass an async function for asynchronous validation.
handleSubmit(async (data) => await fetchAPI(data))

disabled 输入将在表单值中显示为 undefined 值。如果你想阻止用户更新输入并希望保留表单值，你可以使用 readOnly 或禁用整个 <fieldset />。这是 example。

¥disabled inputs will appear as undefined values in form values. If you want to prevent users from updating an input and wish to retain the form value, you can use readOnly or disable the entire <fieldset />. Here is an example.
handleSubmit 函数不会吞掉 onSubmit 回调中发生的错误，因此我们建议你尝试捕获异步请求内部并为你的客户妥善处理这些错误。

¥handleSubmit function will not swallow errors that occurred inside your onSubmit callback, so we recommend you to try and catch inside async request and handle those errors gracefully for your customers.
```
const onSubmit = async () => {
  // async request which may result error
  try {
    // await fetch()
  } catch (e) {
    // handle your error
  }
};

<form onSubmit={handleSubmit(onSubmit)} />
```

示例：

¥Examples:

同步

¥Sync

CodeSandbox ^TS

import React from "react"
import { useForm, SubmitHandler } from "react-hook-form"

type FormValues = {
  firstName: string
  lastName: string
  email: string
}

export default function App() {
  const { register, handleSubmit } = useForm<FormValues>()
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="email" {...register("email")} />

      <input type="submit" />
    </form>
  )
}

异步

¥Async

CodeSandbox ^JS

import React from "react";
import { useForm } from "react-hook-form";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

function App() {
  const { register, handleSubmit, formState: { errors }, formState } = useForm();
  const onSubmit = async data => {
    await sleep(2000);
    if (data.username === "bill") {
      alert(JSON.stringify(data));
    } else {
      alert("There is an error");
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">User Name</label>
      <input placeholder="Bill" {...register("username"} />

      <input type="submit" />
    </form>
  );
}

视频

¥Video

以下视频教程详细解释了 handleSubmit API。

¥The following video tutorial explains the handleSubmit API in detail.

handleSubmit

</> handleSubmit: ((data: Object, e?: Event) => Promise<void>, (errors: Object, e?: Event) => Promise<void>) => Promise<void>

属性

视频

</> `handleSubmit:` `((data: Object, e?: Event) => Promise<void>, (errors: Object, e?: Event) => Promise<void>) => Promise<void>`