Question

我想实现一种类似于Airbnb / Medium的身份验证模式。当我在登录模式中单击“注册”时，登录模式将关闭，而注册模式将打开。我阅读了react-modal文档，但没有找到一种方法。任何人都可以帮助我找到解决方案。谢谢。

Answer 1

我不使用React Modal，但是我知道一种实现它的方法。这个想法是将您的Sign Up和Login组件包装在一个父组件中，该组件存储模式的状态和open / close方法。然后可以将这些方法作为道具传递给子组件。

代码示例：

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);

查看实际情况：https://codesandbox.io/s/q86lwklnxj

react-modal：如何关闭一个模态并同时打开一个新模态？

1 个答案: