锚点和按钮在 React 模式中不可点击

Question

我正在尝试使用 ReactDOM.createPortal 来拥有一个可以从 React 应用程序中的任何位置打开的全局模式。模式将打开并正确显示。问题是模态中的 和 元素不可点击。

我并不是说他们的 onClick 功能不起作用，我的意思是你根本无法点击它们。鼠标不会更改为锚点或按钮的指针。两个元素均呈现如下所示，但没有一个对鼠标单击做出反应。目标是在模式内设置锚点或按钮来关闭它。

由于我无法获取锚点或按钮来注册点击，因此我决定将点击事件附加到位于模式对话框 div 后面的覆盖 div 并遮盖页面的其余部分。这确实有效，但效果太好了。单击模式对话框中的任意位置也会触发此单击事件。

莫代尔.tsx

import ReactDOM from "react-dom";
import './Modal.css';
export default function Modal(props:any){
    const handleCloseClick = () => {
        props.onClose();
    };

    const modalContent = (
        <div className="modal-overlay" onClick={handleCloseClick}>
            <div className="modal-dialog">
                <div className="modal-header d-flex justify-content-between">
                    <span>{props.title}</span>
                    <a href="#" onClick={handleCloseClick}>X</a>
                </div>
                <div className="modal-body">
                    <p>Modal content goes here</p>
                    <button>TEST</button>
                </div>
            </div>
        </div>
    )

    return ReactDOM.createPortal(modalContent, document.body as Element);
}

模态.css

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.modal-dialog {
    width: 500px;
    height: 300px;
    background-color: white;
    z-index: 100;
}

.modal-body {
    padding-top: 10px;
}

.modal-header {
    display: flex;
    justify-content: flex-end;
    font-size: 25px;
}

RootLayout.tsx，其中“打开模态”按钮所在，并且控制模态可见性的状态。

import { Link, Outlet } from 'react-router-dom';
import { useAuth, UseLogin, UseLogout } from '../authentication.context';
import Login from './Login';
import './RootLayout.css';
import { useEffect, useState } from 'react';
import Modal from './Modal';
export default function RootLayout(props: any) {
    const { state, dispatch } = useAuth();
    const [modalVisible, setModalVisible] = useState(false);

    const handleLogout = () => {
        const actions = UseLogout();
        dispatch(actions);
    }

    useEffect(() => {
        if (state) {
            console.log('state in RootLayout:');
            console.log(state);
        }
    }, [state]);

    if (state && state.isAuthenticated) {
        return (
            <div className='h-100'>
                <nav className='navbar navbar-expand-md border border-bottom'>
                    <div className='container-fluid'>
                        <a className="navbar-brand" href="#">JOC Dashboard</a>
                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                                <li className="nav-item">
                                    <Link className='nav-link active' to="/">Home</Link>
                                </li>
                            </ul>

                            <div className='d-flex justify-content-between align-items-center'>
                                {state.user &&
                                    <div className='me-3'>Logged in as {state.user.full_name}</div>
                                }

                                <div className=''>
                                    <button className='btn btn-primary' onClick={handleLogout}>LOGOUT</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
                <div id="root-layout-container" className='container-fluid'>
                    <div className='row'>
                        <div className='col-lg-2'>
                            <div className='d-flex flex-column'>
                                <button onClick={() => setModalVisible(true)}>Open Modal</button>
                            </div>  
                        </div>
                        <div className='col-lg-10'>
                            <Outlet/>
                        </div>
                    </div>
                </div>
                {modalVisible &&
                    <Modal title="Title" onClose={() => setModalVisible(false)}/>
                }
            </div>
            
                
        )
    }

    return (
        <div id="root-layout-container" className='container-fluid h-100'>
            {state && !state.isAuthenticated &&
                <Login />
            }
        </div>
    )
}

我已经检查了所有模态 div 上的 z-index，我看不到任何位于锚点或按钮之上的东西，但也许我错过了它。还有什么可能导致这些元素甚至无法点击？