React-Bootstrap Modal无法显示，点击按钮后按钮失效求助

从你提供的代码和页面HTML来看，问题出在使用的第三方模态框库与react-bootstrap的兼容性上，同时DOM状态也出现了异常。核心问题有两个：

• 根容器#root被添加了aria-hidden="true"属性，直接导致容器内的按钮失去交互性
• 模态框被渲染到#root外部，但因库的内部逻辑问题没有正常显示

具体修复步骤： #

1. 替换为官方react-bootstrap的Modal组件

你已经在使用react-bootstrap的Grid、Button等组件，完全不需要依赖第三方的react-bootstrap-modal库。先修改导入语句：

// 替换原第三方Modal导入
// import Modal from 'react-bootstrap-modal';
// 改为官方组件导入
import { Modal } from 'react-bootstrap';

2. 适配官方Modal的API结构

官方Modal的使用方式和第三方库略有差异，需要调整代码并添加关闭模态框的回调逻辑：

首先在构造函数中新增关闭方法：

constructor(props) {
  super(props);
  this.state = { show: false };
  this.showModal = this.showModal.bind(this);
  this.hideModal = this.hideModal.bind(this); // 添加关闭方法绑定
}

hideModal() {
  this.setState({ show: false });
}

然后修改模态框的渲染代码：

<Modal show={this.state.show} onHide={this.hideModal} aria-labelledby="ModalHeader">
  <Modal.Header closeButton>
    <Modal.Title id="ModalHeader">A Title Goes here</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <p>Some Content here</p>
  </Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={this.hideModal}>
      Cancel
    </Button>
    <Button variant="primary">
      Save
    </Button>
  </Modal.Footer>
</Modal>

3. 移除重复的Bootstrap CSS引入

你的页面同时加载了本地Bootstrap CSS和CDN版本，容易引发样式冲突。建议删除HTML中的CDN链接，只保留本地导入：

<!-- 删除这行重复的CSS引入 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

问题根源说明 #

第三方的react-bootstrap-modal库在处理模态框渲染时，会错误地给根容器#root添加aria-hidden="true"属性，导致容器内的所有元素（包括你的按钮）无法交互。而官方react-bootstrap的Modal组件会正确管理模态框的渲染位置和DOM状态，既不会干扰其他内容的可用性，也能确保模态框正常显示。

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