在React的模態內打開新模型

我是 React 應用程式的初學者。我需要的是，我的導航欄上有一個登錄模式鏈接。它完美地作業。但在該模式中，我有一個注冊模式鏈接。當我按下它時，兩個模態都會立即關閉。這是我寫的示例代碼，

登錄Modal.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;

注冊Modal.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 檔案中時，它可以作業，但我想通過組件方法來完成。請幫我看看我的代碼有什么問題...

uj5u.com熱心網友回復：

您的問題在于您集成第二個模態的方式。一旦你點擊按鈕打開第二個模式，你就會觸發：

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/Next.js中簡單地將資料從一個頁面的組件傳遞到另一個頁面上的組件？

下一篇：瀏覽器渲染一個空頁面