React自定义模态框弹出后输入框无法自动聚焦问题求助

问题原因 #

React的autoFocus属性仅在组件首次挂载到DOM时触发一次。如果你的模态框属于以下情况，autoFocus会失效：

• 模态框一开始就存在于DOM中，只是通过CSS（如display: none）隐藏，显示时输入框已经完成挂载，autoFocus不会重新触发
• 模态框带有过渡动画，输入框挂载完成时模态框还未完全显示，浏览器不会处理自动聚焦请求

解决方案 #

通过useRef获取输入框引用，结合useEffect监听聚焦状态，手动触发聚焦操作，确保模态框显示时输入框能获得焦点。

修改后的ModalInput组件代码：

import { useEffect, useRef } from 'react';

const ModalInput = ({ label, focus }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    // 当focus为true且输入框元素存在时，手动聚焦
    if (focus && inputRef.current) {
      inputRef.current.focus();
    }
  }, [focus]); // 监听focus属性的变化

  return (
    <div className="input-row">
      <div className="label">{label}</div>
      <input ref={inputRef} type="text" style={{ width: "300px" }} />
    </div>
  );
};

ModalInput.defaultProps = {
  focus: false,
};

export default ModalInput;

额外注意事项 #

• 确保父组件中模态框的显示状态与focus属性同步：比如在打开模态框的同时，确保focus被设置为true（如果是条件渲染模态框，focus={true}会随模态框挂载一起生效）
• 如果模态框使用CSS类控制显示/隐藏，需保证focus属性在模态框显示时被切换为true，触发useEffect执行聚焦

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