React+Styled Components实现TextInput页面加载自动聚焦

失效原因 #

自动聚焦不生效的核心原因是Styled Components不同版本的ref接收规则不一致，你代码中使用的innerRef属性无法在当前版本正确获取原生input DOM节点，自然无法触发focus()方法：

• v3及更早版本：styled组件通过innerRef属性接收ref，需要绑定到内部原生DOM
• v4及后续版本：已经废弃innerRefAPI，完全兼容React标准ref透传规则，直接传ref即可拿到内部原生DOM

可直接运行的修复代码 #

如果你使用v4及以上版本的styled-components（目前绝大多数项目的使用版本），直接将innerRef替换为标准ref属性即可，同时确认你的Input组件是直接基于原生input标签封装的styled组件：

import { useEffect, useRef } from 'react';
import styled from 'styled-components';

const Input = styled.input`
  padding: 8px 12px;
  margin: 8px 0;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  /* 确认聚焦样式已正确编写 */
  &:focus {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
    border-color: transparent;
  }
`;

function App() {
  const emailInput = useRef(null);

  useEffect(() => {
    // 可选链判空，拿到原生input节点后直接触发聚焦
    emailInput.current?.focus();
  }, []);

  return (
    <div>
      <Input type="text" placeholder="Name" />
      {/* 高版本styled-components直接传ref即可 */}
      <Input type="email" placeholder="Email" ref={emailInput} />
    </div>
  );
}

多层组件封装场景适配 #

如果你的Input不是直接通过styled.input生成，而是嵌套了自定义函数组件，需要通过forwardRef手动透传ref到最内层的原生input标签：

import { forwardRef } from 'react';
import styled from 'styled-components';

// 自定义基础输入组件，通过forwardRef接收外部传入的ref
const BaseInput = forwardRef(({ type, placeholder, ...rest }, ref) => {
  return <input type={type} placeholder={placeholder} ref={ref} {...rest} />;
});

// 基于基础组件套样式
const Input = styled(BaseInput)`
  /* 同上的样式规则 */
`;

// 业务使用时和之前逻辑完全一致，直接传ref即可

排查提示：如果调整ref后仍未聚焦，可在useEffect中打印emailInput.current确认拿到的是原生input节点，同时检查输入框是否设置了disabled、readOnly属性，或页面初始化阶段有其他逻辑主动抢占了焦点。

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