Skip to content
♥

setFocus

수동으로 입력 포커스 설정

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

이 메서드는 프로그래밍 방식으로 입력 필드에 포커스를 설정할 수 있게 해줍니다. 입력 필드의 ref가 hook form에 등록되어 있는지 확인하세요.

Props

이름타입설명
namestring포커스할 입력 필드의 이름
optionsshouldSelectboolean포커스 시 입력 내용을 선택할지 여부.
규칙
  • 이 API는 ref에서 focus 메서드를 호출하므로, register 시 ref를 제공하는 것이 중요합니다.
  • reset 직후에 setFocus를 호출하지 마세요. reset API가 모든 입력 참조를 제거하기 때문입니다.

예제

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이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.