React Final Form调用focus方法无法聚焦指定表单字段问题

常见失效原因 #

• 调用的focus方法不是原生DOM或组件暴露的标准方法，多数表单封装仅传字段名无法定位到对应输入元素
• 调用时机早于目标字段完成挂载/渲染：如果点击按钮后触发表单重渲染、字段显隐切换，focus执行时目标元素还不存在
• 目标字段设置了disabled、readonly、tabIndex="-1"等属性，本身不支持聚焦操作

修复方案 #

方案1：通过ref直接调用原生focus（兼容性最高） #

直接绑定目标字段的DOM ref，跳过表单封装的中间层，适用于所有技术栈场景：

import { useRef } from 'react';

function App() {
  // 给目标字段声明ref
  const targetFieldRef = useRef(null);

  const handleBtnClick = () => {
    // 安全调用focus方法
    targetFieldRef.current?.focus();
  }

  return (
    <div>
      <button onClick={handleBtnClick}>点击聚焦输入框</button>
      {/* 绑定ref到目标输入框 */}
      <input ref={targetFieldRef} name="fieldName" placeholder="目标输入框" />
    </div>
  )
}

方案2：处理异步渲染场景 #

如果点击按钮后目标字段才会渲染（比如点击后才显示表单/输入框），需要等字段挂载完成后再执行聚焦：

import { useRef, useState, useEffect } from 'react';

function App() {
  const [showField, setShowField] = useState(false);
  const targetFieldRef = useRef(null);

  const handleBtnClick = () => {
    setShowField(true);
  }

  // 监听字段显隐状态，挂载后自动聚焦
  useEffect(() => {
    if(showField) {
      targetFieldRef.current?.focus();
    }
  }, [showField])

  return (
    <div>
      <button onClick={handleBtnClick}>点击显示并聚焦输入框</button>
      {showField && <input ref={targetFieldRef} name="fieldName" />}
    </div>
  )
}

方案3：UI组件库标准调用方式 #

如果使用Ant Design、Element等组件库的封装表单，需要用官方指定的方法获取字段实例后再聚焦，以Ant Design为例：

import { Form, Button, Input } from 'antd';

function App() {
  const [form] = Form.useForm();

  const handleBtnClick = () => {
    // 先获取字段实例再调用focus
    form.getFieldInstance('fieldName')?.focus();
  }

  return (
    <Form form={form}>
      <Form.Item name="fieldName">
        <Input placeholder="表单输入框" />
      </Form.Item>
      <Button onClick={handleBtnClick}>点击聚焦</Button>
    </Form>
  )
}

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