[英]react-modal: How to close one modal and open a new one at the same time?
I want to implement an authentication modal like Airbnb/Medium. 我想实现一个像Airbnb / Medium这样的身份验证模式。 When I click "Sign Up" in the Login Modal, The Login Modal closes and the Register Modal opens.
当我在登录模式中单击“注册”时,登录模式将关闭,而注册模式将打开。 I read react-modal docs and didn't see a way to do so.
我阅读了react-modal文档,但没有找到一种方法。 Could anyone please assist me finding a solution.
任何人都可以帮助我找到解决方案。 Thanks.
谢谢。
I don't use React Modal, but I know a way of implementing it. 我不使用React Modal,但是我知道一种实现它的方法。 The idea is to wrap your Sign Up and Login components inside a parent component that stores the modals' state and open/close methods.
这个想法是将您的Sign Up和Login组件包装在一个父组件中,该组件存储模式的状态和open / close方法。 These methods can then be passed down as props to the children components.
然后可以将这些方法作为道具传递给子组件。
Code example: 代码示例:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Modal from "react-modal";
class ModelWrapper extends Component {
state = {
loginOpened: false,
signupOpened: false
};
openModal = modalType => () => {
if (modalType === "login") {
this.setState({
loginOpened: true,
signupOpened: false
});
} else if (modalType === "signup") {
this.setState({
loginOpened: false,
signupOpened: true
});
}
};
closeModal = modalType => () => {
if (modalType === "login") {
this.setState({
loginOpened: false
});
} else if (modalType === "signup") {
this.setState({
signupOpened: false
});
}
};
render() {
const { loginOpened, signupOpened } = this.state;
return (
<>
<Modal isOpen={loginOpened} onRequestClose={this.closeModal("login")}>
<h1>Login</h1>
<button onClick={this.openModal("signup")}>Open Signup</button>
<button onClick={this.closeModal("login")}>Close this modal</button>
</Modal>
<Modal isOpen={signupOpened} onRequestClose={this.closeModal("signup")}>
<h1>Sign Up</h1>
<button onClick={this.openModal("login")}>Open Login</button>
<button onClick={this.closeModal("signup")}>Close this modal</button>
</Modal>
<button onClick={this.openModal("login")}>Open Login</button>
<button onClick={this.openModal("signup")}>Open Signup</button>
</>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<ModelWrapper />, rootElement);
See it in action: https://codesandbox.io/s/q86lwklnxj 实际观看: https : //codesandbox.io/s/q86lwklnxj
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.