reset

</> `reset:` `<T>(values?: T | ResetAction<T>, options?: Record<string, boolean>) => void`

重置整个表单状态、字段引用和订阅。有可选参数，并允许部分表单状态重置。

¥Reset the entire form state, fields reference, and subscriptions. There are optional arguments and will allow partial form state reset.

属性

¥Props

Reset 有能力保留 formState。以下是你可以使用的选项：

¥Reset has the ability to retain formState. Here are the options you may use:

名称	类型	描述
`values`	object	用于重置表单值的可选对象，建议在提供时提供完整的 defaultValues。
`keepErrors`	boolean	所有错误都将保留。这不能保证进一步的用户操作。
`keepDirty`	boolean	`DirtyFields` 表单状态将保持，`isDirty` 将暂时保持当前状态，直到用户进一步操作。重要：此保留选项不反映表单输入值，而仅反映脏字段表单状态。
`keepDirtyValues`	boolean	`DirtyFields` 和 `isDirty` 将保留，并且只有没有脏字段会更新为最新的剩余值。查看示例。重要：formState `dirtyFields` 需要订阅。
`keepValues`	boolean	表单输入值将保持不变。
`keepDefaultValues`	boolean	保留通过 `useForm`. `isDirty` will be checked again: it is set to be the result of the comparison of any new values provided against the original `defaultValues`. `dirtyFields` will be updated again if values are provided: it is set to be result of the comparison between the new values provided against the original `defaultValues`. 初始化的相同默认值
`keepIsSubmitted`	boolean	`isSubmitted` 状态将保持不变。
`keepTouched`	boolean	`isTouched` 状态将保持不变。
`keepIsValid`	boolean	`isValid` 将暂时保留为当前状态，直到用户执行其他操作。
`keepSubmitCount`	boolean	`submitCount` 状态将保持不变。

RULES

对于受控组件，你需要将 defaultValues 传递到 useForm，以便 reset Controller 组件的值。

¥For controlled components you will need to pass defaultValues to useForm in order to reset the Controller components' value.
当 defaultValues 未提供给 reset API 时，将调用 HTML 原生 reset API 来恢复表单。

¥When defaultValues is not supplied to reset API, then HTML native reset API will be invoked to restore the form.
避免在调用 useForm 的 useEffect 之前调用 reset，这是因为 useForm 的订阅需要在 reset 发送信号刷新表单状态更新之前准备好。

¥Avoid calling reset before useForm's useEffect is invoked, this is because useForm's subscription needs to be ready before reset can send a signal to flush form state update.
提交后建议 reset 内 useEffect。

¥It's recommended to reset inside useEffect after submission.
```
useEffect(() => {
  reset({
    data: "test",
  })
}, [isSubmitSuccessful])
```

只要你在 useForm 中提供了 defaultValues，就可以不带参数运行 reset。

¥It's fine to run reset without argument as long as you have provided a defaultValues at useForm.

reset(); // update form back to default values

reset({ test: 'test' }); // update your defaultValues && form values

reset(undefined, { keepDirtyValues: true }); // reset other form state but keep defaultValues and form values

示例：

¥Examples:

不受控制

¥Uncontrolled

CodeSandbox ^TS

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

interface UseFormInputs {
  firstName: string
  lastName: string
}

export default function Form() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<UseFormInputs>()
  const onSubmit = (data: UseFormInputs) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First name</label>
      <input {...register("firstName", { required: true })} />

      <label>Last name</label>
      <input {...register("lastName")} />

      <input type="submit" />
      <input type="reset" value="Standard Reset Field Values" />
      <input
        type="button"
        onClick={() => reset()}
        value="Custom Reset Field Values & Errors"
      />
    </form>
  )
}

控制器

¥Controller

CodeSandbox ^TS

import React from "react"
import { useForm, Controller } from "react-hook-form"
import { TextField } from "@material-ui/core"

interface IFormInputs {
  firstName: string
  lastName: string
}

export default function App() {
  const { register, handleSubmit, reset, setValue, control } =
    useForm<IFormInputs>()
  const onSubmit = (data: IFormInputs) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        render={({ field }) => <TextField {...field} />}
        name="firstName"
        control={control}
        rules={{ required: true }}
        defaultValue=""
      />
      <Controller
        render={({ field }) => <TextField {...field} />}
        name="lastName"
        control={control}
        defaultValue=""
      />

      <input type="submit" />
      <input type="button" onClick={reset} />
      <input
        type="button"
        onClick={() => {
          reset({
            firstName: "bill",
            lastName: "luo",
          })
        }}
      />
    </form>
  )
}

提交并重置

¥Submit with Reset

CodeSandbox ^JS

import { useForm, useFieldArray, Controller } from "react-hook-form"

function App() {
  const {
    register,
    handleSubmit,
    reset,
    formState,
    formState: { isSubmitSuccessful },
  } = useForm({ defaultValues: { something: "anything" } })

  const onSubmit = (data) => {
    // It's recommended to reset in useEffect as execution order matters
    // reset({ ...data })
  }

  React.useEffect(() => {
    if (formState.isSubmitSuccessful) {
      reset({ something: "" })
    }
  }, [formState, submittedData, reset])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("something")} />
      <input type="submit" />
    </form>
  )
}

场数组

¥Field Array

CodeSandbox ^JS

import React, { useEffect } from "react"
import { useForm, useFieldArray, Controller } from "react-hook-form"

function App() {
  const { register, control, handleSubmit, reset } = useForm({
    defaultValues: {
      loadState: "unloaded",
      names: [{ firstName: "Bill", lastName: "Luo" }],
    },
  })
  const { fields, remove } = useFieldArray({
    control,
    name: "names",
  })

  useEffect(() => {
    reset({
      names: [
        {
          firstName: "Bob",
          lastName: "Actually",
        },
        {
          firstName: "Jane",
          lastName: "Actually",
        },
      ],
    })
  }, [reset])

  const onSubmit = (data) => console.log("data", data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ul>
        {fields.map((item, index) => (
          <li key={item.id}>
            <input {...register(`names.${index}.firstName`)} />

            <Controller
              render={({ field }) => <input {...field} />}
              name={`names.${index}.lastName`}
              control={control}
            />
            <button type="button" onClick={() => remove(index)}>
              Delete
            </button>
          </li>
        ))}
      </ul>

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

视频

¥Videos

reset

</> reset: <T>(values?: T | ResetAction<T>, options?: Record<string, boolean>) => void

属性

视频

</> `reset:` `<T>(values?: T | ResetAction<T>, options?: Record<string, boolean>) => void`