コンテンツにスキップ

resetField

フィールドの状態と値をリセット

</> resetField: (name: string, options?: Record<string, boolean | any>) => void

個々のフィールドの状態をリセットします。

プロパティ

この関数を呼び出すと。

  • isValidフォームの状態が再評価されます。
  • isDirtyフォームの状態が再評価されます。

ResetFieldにはフィールドの状態を保持する機能があります。使用可能なオプションを以下に示します。

名前タイプ説明
namestring登録されたフィールド名です。
optionskeepErrorbooleantrueに設定すると、フィールドのエラーが保持されます。
keepDirtybooleantrueに設定すると、dirtyFieldsが保持されます。
keepTouchedbooleantrueに設定すると、touchedFieldsの状態は変更されません。
defaultValueunknownこの値が提供されていない場合、フィールドは自身のdefaultValueに戻ります。
この値が提供されている場合
  • フィールドは提供された値で更新されます。
  • フィールドのdefaultValueはこの値に更新されます。
  • undefinedでない値のみサポートします。
ルール

  • nameは登録されたフィールド名と一致する必要があります。

    register("test")
    resetField("test") // ✅ register input and resetField works
    resetField("non-existent-name") // ❌ failed by input not found

例

フィールドの状態のリセット

CodeSandbox JS
import * as React from "react"
import { useForm } from "react-hook-form"


export default function App() {
  const {
    register,
    resetField,
    formState: { isDirty, isValid },
  } = useForm({
    mode: "onChange",
    defaultValues: {
      firstName: "",
    },
  })
  const handleClick = () => resetField("firstName")


  return (
    <form>
      <input {...register("firstName", { required: true })} />


      <p>{isDirty && "dirty"}</p>
      <p>{isValid && "valid"}</p>


      <button type="button" onClick={handleClick}>
        Reset
      </button>
    </form>
  )
}

オプションを使った リセット

CodeSandbox JS
import * as React from "react"
import { useForm } from "react-hook-form"


export default function App() {
  const {
    register,
    resetField,
    formState: { isDirty, isValid, errors, touchedFields, dirtyFields },
  } = useForm({
    mode: "onChange",
    defaultValues: {
      firstName: "",
    },
  })


  return (
    <form>
      <input {...register("firstName", { required: true })} />


      <p>isDirty: {isDirty && "dirty"}</p>
      <p>touchedFields: {touchedFields.firstName && "touched field"}</p>
      <p>dirtyFields:{dirtyFields.firstName && "dirty field"}</p>
      <p>isValid: {isValid && "valid"}</p>
      <p>error: {errors.firstName && "error"}</p>


      <hr />


      <button
        type="button"
        onClick={() => resetField("firstName", { keepError: true })}
      >
        Reset keep error
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { keepTouched: true })}
      >
        Reset keep touched fields
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { keepDirty: true })}
      >
        Reset keep dirty fields
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { defaultValue: "New" })}
      >
        update defaultValue
      </button>
    </form>
  )
}

ビデオ

次のビデオチュートリアルはresetFieldAPIの使用方法を示しています。

サポートありがとうございます

お使いのプロジェクトでReact Hook Formが役立つと判断された場合は、スターを付け、サポートをお願いします。