如何通过代码实现Ant Design表单的全局失焦？

我刚好折腾过类似的需求，Ant Design Form组件本身确实没有提供直接的form.unFocus()方法，但我们可以通过几种简单的方式实现自动移除表单焦点的效果：

方法一：通过全局DOM操作定位并失焦 #

利用浏览器原生的document.activeElement获取当前处于焦点状态的元素，判断它是否属于你的表单，再调用blur()方法让它失焦：

// 假设你的表单有一个id为"my-antd-form"的容器
const formContainer = document.getElementById('my-antd-form');
const currentFocusedElement = document.activeElement;

// 确认焦点元素在表单内部时，执行失焦
if (currentFocusedElement && formContainer.contains(currentFocusedElement)) {
  currentFocusedElement.blur();
}

这个方法的好处是无需依赖Form实例，不管焦点在哪个表单项，都能精准定位并处理。

方法二：结合Ant Design Form实例遍历表单项 #

如果你已经持有Form实例（比如通过useForm Hook或者类组件的ref），可以用getFieldsDOM()获取所有表单项的DOM节点，再逐个检查并失焦：

// 函数组件中获取Form实例
const [form] = useForm();

// 定义移除焦点的函数
const removeFormFocus = () => {
  const allFieldNodes = form.getFieldsDOM();
  allFieldNodes.forEach(fieldNode => {
    // 查找当前字段内的焦点元素
    const focusedEl = fieldNode.querySelector(':focus');
    if (focusedEl) {
      focusedEl.blur();
    }
  });
};

这种方式更贴合Ant Design的表单体系，适合你已经在操作Form实例的场景。

方法三：针对特定表单项失焦 #

如果你明确知道要失焦的字段名，也可以直接获取该字段的组件实例，再操作其DOM元素失焦：

// 获取指定字段的组件实例
const targetFieldInstance = form.getFieldInstance('username');

// 针对Input组件，通过inputRef获取原生输入框并失焦
if (targetFieldInstance?.inputRef?.current) {
  targetFieldInstance.inputRef.current.blur();
}

这个方法适合精准控制某个特定表单项的场景。

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