setFocus

setFocus: UseFormSetFocus

이 메서드를 사용하면 입력에 프로그래밍 방식으로 포커스를 설정할 수 있습니다. 입력의 ref가 React Hook Form에 등록되어 있어야 합니다.

매개변수

---

이름		타입	설명
name		string	포커스를 설정할 입력 필드 이름
options	shouldSelect	boolean	v7.27.0부터 포커스할 때 입력 내용을 선택할지 여부입니다.

규칙

• 이 API는 ref의 focus 메서드를 호출하므로 ref를 register할 때 제공해야 합니다.
• setFocus는 reset 직후에는 호출하지 않습니다. reset API가 모든 입력 참조를 제거합니다.

예제

---

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

type FormValues = {
  firstName: string
}

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

  useEffect(() => {
    setFocus("firstName")
  }, [setFocus])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <input type="submit" />
    </form>
  )
}

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

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

  useEffect(() => {
    setFocus("firstName")
  }, [setFocus])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <input type="submit" />
    </form>
  )
}