将第二模态替换为第一模态

Question

首先检查我的react-bootstrap代码：

export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
handleShow = (e) => {
this.setState({ show: true });
};
handleClose = (e) => {
this.setState({ show: false });
};
render() {
return (
<div className="App">
<button onClick={this.handleShow}>Open Modal</button>
<Modal
size="lg"
centered={true}
show={this.state.show}
onHide={this.handleClose}
aria-labelledby="md-modal"
>
<Modal.Header>
First Modal
<button
type="button"
className="close"
onClick={this.handleClose}
>
X
</button>
</Modal.Header>
<Modal.Body>
Please <Content clicked={this.handleClose} /> to show New Content
</Modal.Body>
</Modal>
</div>
);
}
}
class Content extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
handleShow = (e) => {
this.props.clicked();
this.setState({ show: true });
};
handleClose = (e) => {
this.setState({ show: false });
};
render() {
return (
<>
<button onClick={this.handleShow}>Click Here</button>
<Modal
size="lg"
centered={true}
show={this.state.show}
onHide={this.handleClose}
aria-labelledby="md-modal"
>
<Modal.Header>
Second Modal
<button
type="button"
className="close"
onClick={this.handleClose}
>
X
</button>
</Modal.Header>
<Modal.Body>New Content</Modal.Body>
</Modal>
</>
);
}
}

我需要显示第二个模态，然后在点击第一个模态上的按钮后隐藏第一个模态。

您可以在此处看到演示：https://codesandbox.io/s/xenodochial-joliot-jl3qe

问题是当点击第一个模态上的按钮时，两个模态都被隐藏了。

也许在这种情况下我需要使用redux？

Answer 1

因此我们需要跟踪两个模式的状态。。。唯一的区别是，由于模式-2可以从模式-1内部触发，我们需要确保在显示模式-2时关闭模式-1；

我在屏幕上显示了状态，这样就更容易跟踪和理解；

以下是相关代码：

import React, { useState, useEffect } from "react";
import { Modal } from "react-bootstrap";
import "./styles.css";
const Modal1 = ({
modalState,
modalHeading,
toggleModalOne,
openTwoAndCloseOne
}) => {
const [modalOpen, setModalOpen] = useState(modalState);
useEffect(() => {
setModalOpen(modalState);
}, [modalState]);
return (
<Modal
size="lg"
centered={true}
show={modalOpen}
onHide={toggleModalOne}
aria-labelledby="md-modal"
>
<Modal.Header>
{modalHeading}
<button type="button" className="close p-2" onClick={toggleModalOne}>
close <i className={"mdi mdi-close"} />
</button>
</Modal.Header>
<Modal.Body className="p-0">
New Content
<button type="button" onClick={openTwoAndCloseOne}>
close first & open second
</button>
</Modal.Body>
</Modal>
);
};
const Modal2 = ({ modalState, modalHeading, toggleModalTwo }) => {
const [modalOpen, setModalOpen] = useState(modalState);
useEffect(() => {
setModalOpen(modalState);
}, [modalState]);
return (
<Modal
size="lg"
centered={true}
show={modalOpen}
onHide={toggleModalTwo}
aria-labelledby="md-modal"
>
<Modal.Header>
{modalHeading}
<button type="button" className="close p-2" onClick={toggleModalTwo}>
close <i className={"mdi mdi-close"} />
</button>
</Modal.Header>
<Modal.Body className="p-0">
ths is the Second modal and its New Content
</Modal.Body>
</Modal>
);
};
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false,
showSecond: false
};
}
toggleModalOne = (e) => {
this.setState({ show: !this.state.show });
};
toggleModalTwo = (e) => {
this.setState({ showSecond: !this.state.showSecond });
};
openTwoAndCloseOne = (e) => {
this.setState({ showSecond: !this.state.showSecond });
if (this.state.show) this.setState({ show: false });
};
render() {
return (
<div className="App">
1st modal current show status: {this.state.show.toString()}
<br />
2nd modal current show status: {this.state.showSecond.toString()}
<br />
<button type="button" onClick={this.toggleModalOne}>
change Modal1 status to {(!this.state.show).toString()}
</button>
<Modal1
modalHeading={"this is modal heading for the first mofal"}
modalState={this.state.show}
toggleModalOne={this.toggleModalOne}
openTwoAndCloseOne={this.openTwoAndCloseOne}
/>
{/* 
<button type="button" onClick={this.toggleModalTwo}>
change Modal2 status to {(!this.state.showSecond).toString()}
</button> */}
<Modal2
modalHeading={"this is modal heading for the second modal..."}
modalState={this.state.showSecond}
toggleModalTwo={this.toggleModalTwo}
/>
</div>
);
}
}

完整的工作示例在这里分叉出你的代码沙箱