React-Bootstrap（Bootstrap5）模态框可打开但无法关闭问题排查

兄弟，我一眼就揪出问题根源了——你把<Modal>组件直接嵌套在可点击的<tr>标签里面了！这会触发事件冒泡的坑：当你点击模态框里的关闭按钮时，点击事件会顺着DOM树往上冒泡到父元素<tr>，而<tr>上绑定了handleEditClick（会把showModal设为true），结果就是你刚把模态框关掉，它又立刻被重新打开，看起来就像完全关不上一样。

两种解决思路，推荐第一种： #

1. 把Modal移出<tr>的子层级（最推荐）

模态框本质是全局浮层组件，根本不该放在表格行的内部。把它移到表格外面或者组件的根节点附近，彻底切断和<tr>的事件关联：

function MemberMgt() {
    const [showModal, setShowModal] = useState(false);

    const handleCloseClick = () => {
        setShowModal(false);
    };
    const handleEditClick = () => {
        setShowModal(true);
    };

    return (
        <div className="member-mgt-container">
            {/* 表格区域 */}
            <table>
                <tbody>
                    {/* 点击表格行打开模态框 */}
                    <tr onClick={handleEditClick}>
                        <td>成员ID</td>
                        <td>成员姓名</td>
                    </tr>
                </tbody>
            </table>

            {/* 模态框移到表格外面，不再是tr的子元素 */}
            <Modal show={showModal} onHide={handleCloseClick}>
                <Modal.Header closeButton>
                    <Modal.Title>Edit Screen</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    {/* 这里注意：li标签要放在ul/ol里，我改成了p标签，你可以按需调整 */}
                    <p>ID</p>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleCloseClick}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={handleCloseClick}>
                        Save & Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
    );
}

2. 阻止按钮点击事件冒泡（应急方案）

如果因为某些原因必须把Modal放在<tr>里，那就在关闭按钮的点击事件里阻止冒泡，不让事件传到<tr>上：

const handleCloseClick = (e) => {
    e.stopPropagation(); // 阻止事件向上冒泡到父元素tr
    setShowModal(false);
};

额外小提醒： #

你原来的Modal.Body里直接用了<li>标签，这不符合HTML语义规范（<li>必须是<ul>或<ol>的子元素），我在示例里改成了<p>，你可以根据实际内容调整成合适的标签。

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