使用 react-bootstrap 从 reactjs 中的模态 A 打开模态 B 后关闭模态 A

Question

这种情况就像我有一个注册按钮，当我点击它时，会弹出注册模式。 现在我想从注册模式打开登录模式，但是在登录模式弹出后应该关闭注册模式。

show={this.props.signupModalOn}
onHide={this.props.onSignupModalCall}

show={this.props.loginModalOn}
onHide={this.props.onLoginModalCall}

这是 ModalA.js 和 ModalB.js的代码

我尝试了一些情况，我得到了嵌套的弹出模式，但第一个模式没有关闭。

Answer 1

由于注册模式由组件的父级处理，因此您必须传递setState function 才能在子组件中更新它。 为简单起见，我们将 function parentStateUpdate和 state 值signUpModalOn ：

<ModalA parentStateUpdate={value => this.setState({ signUpModalOn: value })} />;

然后你可以像这样修改onLoginModalCall ：

onLoginModalCall = () => {
  this.setState({ loginModalOn: !this.state.loginModalOn, static: true });
  parentStateUpdate({ signUpModalOn: false });
};