react-hook-form的setFocus在Dialog组件中无法生效问题求助

核心原因 #

你遇到的问题本质是调用setFocus的时机不对：当Dialog的open状态切换为true后，组件往往还在执行入场动画，输入框的DOM节点尚未完全挂载到页面；或是react-hook-form的表单注册流程还未完成，导致setFocus无法定位到目标输入框。

具体解决方案 #

结合Dialog的生命周期事件+正确的表单注册方式，就能解决焦点失效问题：

1. 用Dialog的入场完成事件触发setFocus
   以Material UI Dialog为例，使用onEntered回调（该事件在Dialog完全打开、动画结束后触发），此时输入框已稳定存在于DOM中：

   <Dialog open={open} onEntered={() => setFocus("username")}>
     {/* 表单内容 */}
   </Dialog>
   

2. 确保输入框正确关联表单注册ref
   不要手动转发ref，直接使用react-hook-form的register方法返回的属性，让表单能正确追踪输入框的DOM节点：

   const { register, setFocus } = useForm();
   
   // 输入框组件示例
   <TextField
     {...register("username")}
     label="Username"
     variant="outlined"
     fullWidth
   />
   

3. 放弃直接监听open状态的useEffect
   单纯监听open状态会导致在Dialog未渲染完成时就调用setFocus，此时输入框可能还未挂载，因此替换为Dialog的生命周期事件更可靠。

针对你的示例调整 #

在你提供的CodeSandbox代码中，只需删除原来监听open的useEffect，把setFocus("username")移到Dialog的onEntered回调里，同时确认username输入框正确使用了register返回的属性，就能让输入框在Dialog打开时自动获得焦点。

内容的提问来源于stack exchange，提问作者Ruslan