使用 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 });
};