点击Open Modal按钮触发React Bootstrap Modal弹窗问题咨询

核心问题点 #

• 子组件DisplayModalContent中控制Modal显隐的isModalOpen状态未做初始化，初始值为undefined，导致Modal默认处于隐藏状态
• 点击父组件的「Open Modal」按钮仅完成了数据传递，没有同步触发弹窗的打开状态，需要在传入的openItem不为空时自动打开弹窗
• 关闭逻辑未和父组件状态打通，重复点击打开按钮会出现状态不同步的问题

具体修改步骤 #

1. 初始化子组件的弹窗显隐状态 #

修改DisplayModalContent.js的构造函数，添加isModalOpen的初始值：

constructor() {
  super();
  this.state = {
    openItem: null,
    firstName: '',
    lastName: '',
    isModalOpen: false // 新增初始化代码
  };
}

2. 同步数据传入和弹窗打开逻辑 #

修改DisplayModalContent.js的componentDidUpdate钩子，当传入的item有值时自动打开弹窗：

componentDidUpdate(prevProps) {
  if (JSON.stringify(this.props.item) !== JSON.stringify(prevProps.item)) {
    this.setState({ 
      openItem: this.props.item,
      // 传入的item不为空就打开弹窗，为空就关闭
      isModalOpen: this.props.item !== null 
    });
  }
}

3. 打通父子组件的关闭逻辑（可选，避免状态不同步） #

• 首先修改父组件index.js中调用子组件的代码，传入关闭回调：

<DisplayModalContent item={openItem} onClose={this.handleCloseModal} />

• 然后修改子组件的关闭方法，同步清空父组件状态：

handleCloseModal = () => {
  this.setState({ openItem: null, isModalOpen: false });
  this.props.onClose();
};

hideShowModal = () => {
  const newStatus = !this.state.isModalOpen;
  this.setState({ isModalOpen: newStatus });
  if(!newStatus) {
    this.props.onClose();
  }
};

• 最后给Modal的关闭按钮绑定点击事件：

<Button variant="secondary" onClick={this.handleCloseModal}>CLOSE</Button>

如果不需要额外的「Click to hide/show」按钮，直接删掉对应的Button代码即可，修改后点击父组件的「Open Modal」按钮会直接弹出对应数据的弹窗。

补充说明 #

如果出现弹窗样式异常，是因为你当前引入的是Bootstrap 3的CSS，最新版React Bootstrap依赖Bootstrap 5，替换index.html的CSS链接即可：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

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