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

此方法允许您注销单个输入或一组输入。它还提供第二个可选参数，以便在注销输入后保留状态。

道具

以下示例显示了调用unregister方法时应有的结果。

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

类型	输入名称	值
字符串	`unregister("yourDetails")`	`{}`
字符串	`unregister("yourDetails.firstName")`	`{ lastName: '' }`
字符串数组	`unregister(["yourDetails.lastName"])`	`''`

选项

名称	类型	描述
`keepDirty`	布尔值	在此操作期间，`isDirty` 和 `dirtyFields` 将保持不变。但是，这并不能保证下一次用户输入不会更新`isDirty` formState，因为`isDirty` 是相对于`defaultValues` 进行测量的。
`keepTouched`	布尔值	`touchedFields` 将不再在注销后移除该输入。
`keepIsValid`	布尔值	在此操作期间，`isValid` 将保持不变。但是，这并不能保证下一次用户输入不会更新`isValid` 以进行模式验证，您将需要根据注销调整模式。
`keepError`	布尔值	`errors` 将不会更新。
`keepValue`	布尔值	输入的当前`value` 将不会更新。
`keepDefaultValue`	布尔值	在`useForm` 中定义的输入的`defaultValue` 将保持不变。

规则

此方法将移除输入引用及其值，这意味着内置验证规则也将被移除。

通过注销输入，不会影响模式验证。

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