我在我的项目中使用React-bootstrap。 我需要打开多个对话框。 有没有办法实现这个目标?
注意: bootstrap here有答案,但它在react-bootstrap中不起作用。 感谢。
答案 0 :(得分:2)
我们只是通过将每个过程的ID设置为不同的id,然后将“ show”状态设置为该状态来处理多个模式:
class App extends Component {
constructor(props, context) {
super(props, context);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
show: null
};
}
handleClose() {
this.setState({show: id});
}
handleShow(id) {
this.setState({show: id});
}
render() {
return (
<div className="App">
<Grid>
<Row>
<Col xsOffset={1} sm={5}>
<Button bsStyle="primary" bsSize="large" onClick={() => this.handleShow('here')}>
<h1>You are here!</h1>
</Button>
<Modal
show={this.state.show == 'here'} onHide={this.handleClose}
>
<Modal.Header closeButton closeLabel="close window">
</Modal.Header>
<Modal.Body>
<p className='landing-page-markers you-are-here'>Tired of toy projects, tutorials and online courses?
<img src={logo} className="App-logo" alt="logo" />
</p>
</Modal.Body>
</Modal>
</Col>
</Row>
... more modals passing in different ids ...
答案 1 :(得分:2)
如果您将scss用作css预处理器,则可以使用循环定义正确的z-index
,以使所有内容看起来像一个顶部。
此循环最多可以处理5个级别,您可以根据需要增加数量
@for $i from 1 through 6 {
$zIndexBackdrop: #{1000 + (5 * $i)};
$zIndexContent: #{1000 + (5 * $i) + 2};
.modal-backdrop.show:nth-of-type(#{$i}) {
z-index: $zIndexBackdrop;
}
div[role="dialog"][aria-modal="true"]:nth-of-type(#{$i}) {
z-index: $zIndexContent;
}
}
这里1 through 6
的循环循环5次,如果需要,可以通过增加数量来增加模态深度。
我使用了react-bootstrap
模态使用的通用类名,请交叉检查如何创建背景和主要模态。
答案 2 :(得分:1)
我使用了多个这样的模型
render() {
return(
<div>
<button onClick={() => this.setState({ showModal1:true, showModal2:false});} >open modal one</button>
<button onClick={() => this.setState({ showModal2:true, showModal1:false});} >open modal two</button>
<Modal show={this.state.showModal1} onHide={() => this.setState({ showModal1:false});}>
modal one content..
</Modal>
<Modal show={this.state.showModal2} onHide={() => this.setState({ showModal2:false});}>
modal two content..
</Modal>
</div>
);
}
答案 3 :(得分:1)
如果您使用的是React 16.8+,则可以使用React Hook useState
(和功能组件),以便根据状态指定希望其出现的模态:
export const MyModals = () => {
const [modalState, setModalState] = useState< "modal-one" | "modal-two" | "close" >("close")
const handleShowModalOne = () => {
setModalState("modal-one")
}
const handleShowModalTwo = () => {
setModalState("modal-two")
}
const handleClose = () => {
setModalState("close")
}
return (
<div>
<Button onClick={handleShowModalOne}>Show Modal One</Button>
<Modal show={modalState === "modal-one"}>
<Modal.Body>This is Modal One</Modal.Body>
<Modal.Footer>
<Button onClick={handleShowModalTwo}>Show Modal Two</Button>
</Modal.Footer>
</Modal>
<Modal show={modalState === "modal-two"}>
<Modal.Body>This is Modal Two</Modal.Body>
<Modal.Footer>
<Button onClick={handleClose}>Close</Button>
</Modal.Footer>
</Modal>
</div>
)
}
答案 4 :(得分:0)
这取决于你想要达到的目标。我有多个反应引导模态对话框,还有嵌入式对话框,如模态对话框显示弹出窗口,显示错误消息。 通常,您可以定义状态变量,如下所示:
this.state = {showModal1:true, showModal2:false,...}
在渲染功能中,您可以这样做:
render() {
return(
<div>
<Modal show={this.state.showModal1}>
some modal 1 text comes here
</Modal>
<Modal show={this.state.showModal2}>
some modal 2 text comes here
</Modal>
</div>
);
}
在上面的代码中,如果showModal1和showModal2都为true,您将获得两个模态对话框,第二个将在第一个上方。