Skip to content

trigger

폼 전체에서 유효성 검사 트리거

trigger: (name?: string | string[]) => Promise<boolean>

폼 또는 인풋의 유효성 검사를 수동으로 트리거합니다. 이 메서드는 의존적인 유효성 검사가 있는 경우(입력 유효성 검사가 다른 입력 값에 의존하는 경우)에도 유용합니다.

Props

NameTypeDescriptionExample
nameundefined모든 필드에서 유효성 검사 트리거.trigger()
stringname으로 특정 필드 값에 대한 유효성 검사 트리거.trigger("yourDetails.firstName")
string[]name으로 여러 필드에 대한 유효성 검사 트리거.trigger(["yourDetails.lastName"])
shouldFocusboolean에러를 설정하는 동안 입력에 초점을 맞춰야 합니다. 입력의 참조가 등록된(registered) 경우에만 작동하며, custom register에는 작동하지 않습니다.trigger('name', { shouldFocus: true })
RULES

분리 렌더링 최적화는 페이로드가 string인 단일 필드 이름을 대상으로 하는 경우에만 적용되며, 트리거에 array과 undefined를 제공하면 전체 formState를 다시 렌더링합니다.

Examples:

CodeSandbox TS
import React from "react"
import { useForm } from "react-hook-form"


type FormInputs = {
  firstName: string
  lastName: string
}


export default function App() {
  const {
    register,
    trigger,
    formState: { errors },
  } = useForm<FormInputs>()


  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <button
        type="button"
        onClick={() => {
          trigger("lastName")
        }}
      >
        Trigger
      </button>
      <button
        type="button"
        onClick={() => {
          trigger(["firstName", "lastName"])
        }}
      >
        Trigger Multiple
      </button>
      <button
        type="button"
        onClick={() => {
          trigger()
        }}
      >
        Trigger All
      </button>
    </form>
  )
}
CodeSandbox JS
import React from "react"
import { useForm } from "react-hook-form"


export default function App() {
  const {
    register,
    trigger,
    formState: { errors },
  } = useForm()


  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <button
        type="button"
        onClick={async () => {
          const result = await trigger("lastName")
          // const result = await trigger("lastName", { shouldFocus: true }); 입력 focus 허용
        }}
      >
        Trigger
      </button>
      <button
        type="button"
        onClick={async () => {
          const result = await trigger(["firstName", "lastName"])
        }}
      >
        Trigger Multiple
      </button>
      <button
        type="button"
        onClick={() => {
          trigger()
        }}
      >
        Trigger All
      </button>
    </form>
  )
}

Video

다음 동영상에서는 trigger API에 대해 자세히 설명합니다.

지원해 주셔서 감사합니다

프로젝트에서 React Hook Form이 유용하다고 생각하신다면, 스타를 눌러 지원해 주시길 부탁드립니다.