在 React 的模态内打开新模型

Question

我是 React 应用程序的新手。我需要的是，我的导航栏上有一个登录模式 link。它工作得很好。但是在那个模态里面，我有一个注册模态link。当我按下它时，两个模式都会立即关闭。这是我写的示例代码，

SignInModal.js

 import { Fragment, useState } from "react";
    import { Link } from "react-router-dom";
    import { Modal, Button } from "react-bootstrap";
    import SignUpModal from "./SignUpModal";
    
    const SignInModal = () => {
      const [signIn, setSignIn] = useState(false);
      const [signUp, setSignUp] = useState(false);    
      const handleClose = () => setSignIn(false)
      const handleClose2 = () => setSignUp(false)
      const handleShow = () => {
        setSignIn(true);
      };
      const handleShow2 = () => {
        setSignUp(true);
        setSignIn(false);
      };
      return (
        <Button variant="primary" onClick={handleShow}>
            Sign In
          </Button>
    
          <Modal show={signIn} onHide={handleClose}>
            <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body><p>There is a form about login information on  that window</p>
            <Link as={Button} to="#" size="sm" onClick={handleShow2}>
              Register 
            </Link>
            <SignUpModal show={signUp} onClose2={handleClose2} />
            </Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" onClick={handleClose}>
                Close
              </Button>
              <Button variant="primary" onClick={handleClose}>
                Save Changes
              </Button>
            </Modal.Footer>
          </Modal>
      );
    };
export default SignInModal;

SignUpModal.js

import { Fragment, useState } from "react";
import { Modal, Button} from "react-bootstrap";

const SignUpModal = (props) => {
  const {show, onClose2} = props;
  return (
    <Modal show={show} onHide={onClose2}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body><p>Form for signUp          </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose2}>
            Close
          </Button>
          <Button variant="primary" onClick={onClose2}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
  );
};

export default SignUpModal;

当我将 2 个模态框放入同一个 modal.js 文件时，它可以工作，但我想通过组件方法来完成。请帮我看看我的代码有什么问题...

Answer 1

您的问题在于您集成第二个模态的方式。一旦你点击按钮打开第二个模式，你就开火了：

const handleShow2 = () => {
  setSignUp(true);
  setSignIn(false);
};

正如我们所见，这将关闭模态 1。由于它嵌入了第二个模态，因此第二个模态也将消失。

为了解决这个问题，您应该在第一个模态之外渲染第二个模态，例如：

return (
        <Button variant="primary" onClick={handleShow}>
            Sign In
          </Button>
          <SignUpModal show={signUp} onClose2={handleClose2} />
          <Modal show={signIn} onHide={handleClose}>
            <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body><p>There is a form about login information on  that window</p>
            <Link as={Button} to="#" size="sm" onClick={handleShow2}>
              Register 
            </Link>
            // SignUpModal got removed outside of the first modal.
            </Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" onClick={handleClose}>
                Close
              </Button>
              <Button variant="primary" onClick={handleClose}>
                Save Changes
              </Button>
            </Modal.Footer>
          </Modal>
      );

在 React 的模态内打开新模型

Open new model inside of a modal in React

reactjs

bootstrap-modal