Skip to content

setFocus

입력 포커스 수동 설정

setFocus: (name: string, options: SetFocusOptions) => void

이 메서드는 사용자가 프로그래밍적으로 입력 필드에 포커스를 설정할 수 있도록 합니다. 입력 필드의 ref가 훅 폼에 등록되었는지 확인하세요.

Props

NameTypeDescription
namestring포커스를 설정할 입력 필드의 이름.
optionsshouldSelectboolean포커스 시 입력 내용을 선택할지 여부.
RULES
  • 이 API는 ref에서 focus 메서드를 호출하므로, register 시 반드시 ref를 제공해야 합니다.
  • reset API 사용 직후 setFocus를 호출하지 마세요.reset으로 인해 모든 입력 필드의 ref가 제거되기 때문입니다.

Examples

CodeSandbox TS
import * as React 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)
  renderCount++


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


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <input type="submit" />
    </form>
  )
}
CodeSandbox JS
import * as React from "react"
import { useForm } from "react-hook-form"


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


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


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

지원해 주셔서 감사합니다

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