跳至内容

setFocus

手动设置输入焦点

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

此方法允许用户以编程方式将焦点放在输入框上。确保输入框的 ref 已注册到钩子表单中。

属性

名称类型描述
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 对您的项目有用，请考虑为其点赞和支持。