</> `unregister:` (name: string | string[], options) => void

このメソッドを使用すると、単一入力または入力の配列の登録解除を行うことができます。また、入力の登録解除後も状態を維持するための、2番目のオプション引数も提供します。

プロパティ

以下の例は、unregisterメソッドを呼び出した場合の期待値を示しています。

<input {...register('yourDetails.firstName')} />
<input {...register('yourDetails.lastName')} />

型	入力名	値
文字列	`unregister("yourDetails")`	`{}`
文字列	`unregister("yourDetails.firstName")`	`{ lastName: '' }`
文字列配列	`unregister(["yourDetails.lastName"])`	`''`

オプション

名前	型	説明
`keepDirty`	真偽値	このアクションの間、`isDirty`と`dirtyFields`は維持されます。しかし、これは次のユーザー入力によって`isDirty`フォームの状態が更新されないことを保証するものではありません。なぜなら、`isDirty`は`defaultValues`に対して測定されるからです。
`keepTouched`	真偽値	登録解除後も、`touchedFields`はその入力を削除しなくなります。
`keepIsValid`	真偽値	このアクションの間、`isValid`は維持されます。しかし、これは次のユーザー入力によってスキーマ検証の`isValid`が更新されないことを保証するものではありません。スキーマは登録解除に合わせて調整する必要があります。
`keepError`	真偽値	`errors`は更新されません。
`keepValue`	真偽値	入力の現在の`value`は更新されません。
`keepDefaultValue`	真偽値	`useForm`で定義された入力の`defaultValue`は維持されます。

ルール

このメソッドは入力参照とその値を削除します。つまり、組み込みの検証ルールも削除されます。

入力をunregisterしても、スキーマ検証には影響しません。

const schema = yup
  .object()
  .shape({
    firstName: yup.string().required(),
  })
  .required()

unregister("firstName") // this will not remove the validation against firstName input

registerコールバックを持つ入力をアンマウントしてください。そうでなければ、入力は再び登録されます。

const [show, setShow] = React.useState(true)

const onClick = () => {
  unregister("test")
  setShow(false) // make sure to unmount that input so register not invoked again.
}

{
  show && <input {...register("test")} />
}

例

CodeSandbox ^TS

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

interface IFormInputs {
  firstName: string
  lastName?: string
}

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

  React.useEffect(() => {
    register("lastName")
  }, [register])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <button type="button" onClick={() => unregister("lastName")}>
        unregister
      </button>
      <input type="submit" />
    </form>
  )
}

動画

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

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

登録解除

</> unregister: (name: string | string[], options) => void

プロパティ

オプション

動画

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

</> `unregister:` (name: string | string[], options) => void