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

フォームの状態、フィールド参照、サブスクリプション全体をリセットします。オプション引数があり、部分的なフォーム状態のリセットを許可します。

プロパティ

Resetは、formStateを保持する機能があります。使用できるオプションを以下に示します。

名前	型	説明
`values`	オブジェクト	フォームの値をリセットするためのオプションのオブジェクトです。指定する場合は、すべてのdefaultValuesを提供することをお勧めします。
`keepErrors`	ブール値	すべてのエラーは残ります。これは、以降のユーザー操作を保証するものではありません。
`keepDirty`	ブール値	`DirtyFields`フォームの状態は残り、`isDirty`は、ユーザーによるさらなる操作が行われるまで、一時的に現在の状態として残ります。重要：このkeepオプションは、フォームの入力値を反映するのではなく、汚れたフィールドのフォームの状態のみを反映します。
`keepDirtyValues`	ブール値	`DirtyFields`と`isDirty`は残りますが、クリーンなフィールドのみが最新のレスト値に更新されます。例をご覧ください。重要：フォームの状態`dirtyFields`を購読する必要があります。
`keepValues`	ブール値	フォームの入力値は変更されません。
`keepDefaultValues`	ブール値	`useForm`で初期化されたのと同じdefaultValuesを保持します。 `isDirty`は再度チェックされます。これは、提供された新しい値と元の`defaultValues`の比較の結果として設定されます。値が提供された場合、`dirtyFields`は再度更新されます。これは、提供された新しい値と元の`defaultValues`の比較の結果として設定されます。
`keepIsSubmitted`	ブール値	`isSubmitted`の状態は変更されません。
`keepTouched`	ブール値	`isTouched`の状態は変更されません。
`keepIsValid`	ブール値	`isValid`は、ユーザーによる追加の操作が行われるまで、一時的に現在の状態として保持されます。
`keepSubmitCount`	ブール値	`submitCount`の状態は変更されません。

ルール

制御されたコンポーネントの場合、Controllerコンポーネントの値をresetするには、defaultValuesをuseFormに渡す必要があります。
defaultValuesがreset APIに提供されない場合、フォームを復元するためにHTMLネイティブのreset APIが呼び出されます。
useFormのuseEffectが呼び出される前にresetを呼び出さないでください。これは、resetがフォームの状態更新をフラッシュするためのシグナルを送信する前に、useFormのサブスクリプションの準備が整っている必要があるためです。

送信後、useEffect内でresetを実行することをお勧めします。

useEffect(() => {
  reset({
    data: "test",
  })
}, [isSubmitSuccessful])

useFormでdefaultValuesを提供している限り、引数なしでresetを実行しても問題ありません。

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

例

非制御

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

コントローラー

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

リセットして送信

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

フィールド配列

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

動画

ご支援ありがとうございます

React Hook Formがプロジェクトで役立つと感じた場合は、スターを付けてサポートをご検討ください。

リセット

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

プロパティ

動画

ご支援ありがとうございます

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