React与Material UI中Dialog按钮聚焦失效问题排查（替代autoFocus）

为什么cancelButtonRef.current始终为null？ #

Material UI的Dialog组件带有入场动画，当open状态变为true时，Dialog的内容并不会立即挂载到DOM中——动画过程中组件还处于过渡状态，此时你依赖open的useEffect执行时，Button元素还未完成渲染，所以ref还没被赋值，自然无法调用focus()。

虽MUI的Button支持直接绑定ref，但时机不对是核心问题。

正确的实现方式 #

利用Dialog组件提供的onEntered回调——这个方法会在Dialog完全打开（包括入场动画结束）后触发，此时DOM元素已经完全挂载，ref也已经正确指向Button的DOM节点，这时调用focus()就能生效。

修改后的组件代码如下：

import { useState, useRef, useEffect } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import PropTypes from 'prop-types';

export default function DialogYesNo(props) {
    const { parentShowAlert, parentOnCloseDialog, dialogTitle, dialogText } = props;

    const [open, setOpen] = useState(false);

    const handleClose = () => {
        setOpen(false);
        parentOnCloseDialog();
    };

    const cancelButtonRef = useRef(null);

    // Dialog完全打开后的回调
    const handleDialogEntered = () => {
        if (cancelButtonRef.current) {
            cancelButtonRef.current.focus();
        }
    };

    // 同步父组件的显示状态
    useEffect(() => {
        setOpen(parentShowAlert);
    }, [parentShowAlert]);

    return (
        <div>
            <Dialog 
                open={open} 
                onClose={handleClose} 
                aria-labelledby="alert-dialog-title" 
                aria-describedby="alert-dialog-description"
                onEntered={handleDialogEntered} // 添加这个回调
            >
                <DialogTitle id="alert-dialog-title">{dialogTitle}</DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">{dialogText}</DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} ref={cancelButtonRef}>
                        No
                    </Button>
                    <Button onClick={handleClose}>Agree</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

DialogYesNo.propTypes = {
    parentShowAlert: PropTypes.bool,
    parentOnCloseDialog: PropTypes.func,
    dialogTitle: PropTypes.string,
    dialogText: PropTypes.string
};

额外说明 #

• 若不需要等待动画结束，也可使用onEnter回调（Dialog开始入场时触发），但onEntered更可靠，能确保元素完全渲染。
• 关于无障碍（a11y）：手动聚焦按钮时，要确保聚焦的是用户预期的操作按钮（比如取消/关闭按钮），避免干扰用户操作流程，这样既规避了autoFocus的代码检查错误，又符合无障碍要求。

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