模态框打开后如何聚焦输入框？useRef与autoFocus均无法使用

因为你是通过点击按钮触发动态渲染的confirm模态框，输入框的autoFocus属性只会在组件首次挂载时生效，但模态框打开前输入框根本不在DOM里，所以这个属性失效。又因为没法用useRef，可以试试下面两种方法：

方法一：利用模态框的打开完成回调（推荐） #

如果你的confirm组件支持打开后的回调（比如Ant Design的afterOpen），可以在回调里手动找到输入框并聚焦：

export const payModal = () => {
    confirm({
        icon: " ",
        title: <Input type="text" className="pay-modal-input" />,
        afterOpen: () => {
            // 通过自定义类名精准定位输入框
            const inputElement = document.querySelector('.pay-modal-input');
            if (inputElement) {
                inputElement.focus();
            }
        }
    })
}

• 给Input加一个唯一的class，避免误选到页面上其他输入框
• 不同UI库的回调名称可能不一样，比如有的叫onVisibleChange，这时可以判断可见性为true时执行聚焦逻辑

方法二：延迟执行聚焦（兜底方案） #

如果找不到合适的回调，也可以用setTimeout延迟一小段时间，确保模态框和输入框都渲染完成：

export const payModal = () => {
    confirm({
        icon: " ",
        title: <Input type="text" className="pay-modal-input" />,
    });
    // 延迟100ms足够让DOM渲染完成
    setTimeout(() => {
        const inputElement = document.querySelector('.pay-modal-input');
        inputElement?.focus();
    }, 100);
}

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