React中用Refs设置按钮焦点实现键盘无障碍时Ref为空的问题

问题根源 #

1. 仅给delete分支的Cancel按钮绑定了cancelRef，download分支的Cancel按钮未绑定，导致切换到下载模式时ref始终为null
2. React状态更新是异步的，直接在handleFocus中调用focus()时，组件可能还未完成重新渲染，此时ref.current仍为null
3. Chromium浏览器关闭模态框后默认焦点行为异常，需手动控制焦点回归时机

具体修复步骤 #

1. 给所有Cancel按钮绑定ref

将两个分支的Cancel按钮都绑定同一个cancelRef，确保无论哪个模式下，ref都能指向对应的Cancel按钮：

{selectionType === "download" && (
    <>
        {" "}
        <Button onClick={() => handleDownload()}>
            Download
        </Button>
        <Button
            ref={cancelRef}
            onClick={() => {
                setEnableSelect(false);
                setSelectedImages([]);
            }}
        >
            Cancel
        </Button>
    </>
)}

2. 用useEffect监听模态框状态，延迟设置焦点

利用useEffect监听showDeleteModal的变化，当模态框从显示变为隐藏时，再执行焦点设置，确保组件已完成重新渲染：

import { useEffect, useRef } from 'react';

export const Images = ({ setUserImages, userImages }) => {
    const cancelRef = useRef(null);
    // ...其他状态定义

    useEffect(() => {
        // 模态框关闭时，聚焦到Cancel按钮
        if (!showDeleteModal && cancelRef.current) {
            cancelRef.current.focus();
        }
    }, [showDeleteModal]);

    const handleFocus = () => {
        setShowDeleteModal(false);
        setSelectedImages([]);
    };

    // ...其他函数定义
}

3. 统一所有模态框关闭场景的焦点处理

包括点击Yes按钮、No按钮、模态框外部关闭的情况，都让useEffect统一处理焦点，避免重复代码：

// 修改handleDelete函数
const handleDelete = () => {
    // 执行删除逻辑
    const updatedImages = userImages.filter(img => !selectedImages.includes(img.id));
    setUserImages(updatedImages);
    setSelectedImages([]);
    setShowDeleteModal(false);
};

// 修改模态框onClose回调
<Modal
    onClose={() => {
        setShowDeleteModal(false);
        setSelectedImages([]);
    }}
>
    {/* 模态框内容 */}
</Modal>

4. 可选：选择模式切换时的焦点优化

当从普通模式切换到选择模式（delete/download）时，自动聚焦到Cancel按钮，提升键盘导航体验：

useEffect(() => {
    if (enableSelect && cancelRef.current) {
        cancelRef.current.focus();
    }
}, [enableSelect, selectionType]);

效果验证 #

修改后，无论在Chromium还是Firefox浏览器中，关闭删除确认模态框后，焦点都会正确回到Cancel按钮，解决了焦点跳转到页脚的问题，同时ref也能正确获取到Cancel按钮的DOM引用。

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