React/Redux+AntDesign组件焦点设置问题：componentDidMount无法聚焦

我来帮你排查这个焦点设置的坑！你遇到的Cannot read property 'focus' of undefined报错，本质都是同一个问题：你要聚焦的DOM元素要么还没挂载到页面上，要么你没正确获取到它的引用。咱们分场景一步步解决：

一、类组件中用Ref聚焦普通DOM元素 #

你写的Ref绑定方式其实是对的，但要注意两个细节：

1. 普通div默认没有聚焦能力，需要添加tabIndex属性才能被focus()
2. 一定要确保元素在componentDidMount执行时已经被渲染（别被条件渲染逻辑藏起来了）

正确代码示例：

class MyComponent extends React.Component {
  componentDidMount() {
    // 先做存在性判断，避免元素未挂载时报错
    if (this.nameDiv) {
      this.nameDiv.focus();
    }
  }

  render() {
    // 给div加tabIndex，让它支持聚焦
    return (
      <div 
        ref={(div) => { this.nameDiv = div; }} 
        tabIndex="0"
        style={{ outline: 'none' }} // 可选：去掉默认聚焦边框
      >
        我是可以被聚焦的容器
      </div>
    );
  }
}

二、Ant Design组件的聚焦处理 #

AntD的表单组件（比如Input）是封装过的React组件，直接拿Ref拿到的是组件实例，不是底层DOM元素，得用它暴露的方法获取真实DOM：

方式1：回调Ref（兼容AntD 3.x/4.x） #

class MyComponent extends React.Component {
  componentDidMount() {
    if (this.inputRef) {
      // 通过组件实例的input属性拿到底层input元素
      this.inputRef.input.focus();
    }
  }

  render() {
    return <Input ref={(ref) => this.inputRef = ref} placeholder="试试聚焦我" />;
  }
}

方式2：createRef（推荐AntD 4.x+使用） #

class MyComponent extends React.Component {
  // 初始化Ref
  inputRef = React.createRef();

  componentDidMount() {
    if (this.inputRef.current) {
      this.inputRef.current.focus();
    }
  }

  render() {
    return <Input ref={this.inputRef} placeholder="试试聚焦我" />;
  }
}

三、document.getElementById的坑 #

这个方法看似简单，但很容易踩条件渲染的坑：如果你的<input id="mytext"/>是通过{isShow && <input/>}这种逻辑渲染的，初始isShow为false的话，componentDidMount执行时元素还没挂载，自然会返回undefined。

解决方法：

• 要么确保元素在初始渲染时就存在
• 要么在元素渲染完成后再调用focus，比如在componentDidUpdate里判断：

componentDidUpdate(prevProps) {
  if (this.props.isShow && !prevProps.isShow) {
    const input = document.getElementById("mytext");
    if (input) input.focus();
  }
}

四、函数组件的解决方案（如果是函数组件的话） #

如果你的组件是函数式的，要用useRef和useEffect替代类组件的生命周期：

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

function MyComponent() {
  const inputRef = useRef(null);

  // 模拟componentDidMount的执行时机
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} placeholder="自动聚焦" />;
}

最后总结一下核心要点 #

1. 聚焦前必须确保元素已经挂载到DOM上（别被条件渲染卡了）
2. 针对不同类型的元素（普通DOM/封装组件）用对应的Ref获取方式
3. 永远加一层存在性判断if (xxx)，避免出现undefined报错

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