我正在嘗試從 React.js 中的另一個模態打開一個模態。 但以前的模態保持打開狀態

Question

它是一個登錄頁面組件，我想打開忘記密碼組件。 兩個組件都是模態的。 但是當我點擊忘記密碼時，登錄頁面模式保持打開狀態。 我剛剛關閉了登錄彈出窗口，當我點擊它時，忘記了密碼組件

下面是登錄彈窗組件

    //Initial state for Modal
    const [show, setShow] = useState(false);
   //Close Modal
    const handleClose = () => {
        setShow(false)
    };
    //On this click Modal get visiblr
    const handleShow = () => setShow(true);
    
    
 <>

    <p onClick={handleShow}>LOGIN</p>
    //Login Modal
    <Modal show={show} onHide={handleClose} className="p-5 authpop">

        <Modal.Header closeButton onClick={handleClose}>
            <Modal.Title>
                Log In
            </Modal.Title>
        </Modal.Header>
        //Form submit
        <Form className=" p-3" onSubmit={handleSubmit}>
            <Form.Group className="mb-3 validateInput">
                <Form.Label>Enter email id</Form.Label>
                <Form.Control ref={emailRef} className="inputField" id="loginEmail" type="email" placeholder="Your email"
                    onChange={validateEmail}
                />
                <span className="errorMsg" >{emailError}</span>
            </Form.Group>
            <Form.Group className="mb-3 validateInput">
                <Form.Label>Enter Password</Form.Label>
                <Form.Control ref={passwRef} className="inputField" id="loginPass" type="password" placeholder="Password"
                    onChange={(e) => setPassword(e.target.value)}
                />
            </Form.Group>
            <Form.Group className="mb-3 d-flex justify-content-center">
                <Button className="SelectLogBtns LoginBtns" variant="primary" type="Submit">
                    Log In
                </Button>
            </Form.Group>
            <div className="errorMsg d-flex mb-3" >{error}</div>
            <Form.Group className="mb-3 loginlsRw">
                <div className="forgottLink eqSpace justify-content-start">     
                    //ForgottPassword Component link  
                    <ForgottPassw/>
                </div>                   
           
        </Form>
    </Modal>
    </>  

 //Here is forgot password component 
`const ForgottPassw = () => {
    const [Fogshow, setFogShow] = useState(false);    
    const [showBtn, setShowBtn] = useState(false);
    const handleFogClose = () => setFogShow(false);
    const handleFogShow = () => setFogShow(true);
    const { forgottPass } = useUserAuth();       
    return (
        <>            <p onClick={handleFogShow}>Forgott Password</p>
            <Modal show={Fogshow} onHide={handleFogClose} className="p-5 authpop">
                <Modal.Header closeButton onClick={handleFogClose}>
                </Modal.Header>
                <Form className="p-3" onSubmit={handleForgott}>
                    <Form.Group className="mb-3 validateInput">
                        <Form.Label>Enter email id</Form.Label>
                        <Form.Control ref={emailRef} className="inputField" id="loginEmail" type="email" placeholder="Your email"
                            onChange={validateFogEmail}
                        />
                        <span className="errorMsg" >{emailError}</span>
                    </Form.Group>

//重置鏈接 <Form.Group style={{ visibility: showBtn? 'visible': 'hidden' }} className="mb-3 d-flex justify-content-center"> 發送重置鏈接 </Form.Group> </> ); }`

Answer 1

好吧，除非你這樣做，否則登錄模式不會在任何地方出現 go。 目前，當show state 為true時，會呈現登錄模式。 即使您單擊忘記密碼鏈接，它也會保持打開狀態，因為您沒有將 state 恢復為false 。 無論使忘記模式可見的邏輯在哪里，都包括登錄模式的setShow(false) 。 因為我不能說你在ForgetPassword文件和你的主要組件中做了什么，所以我不能說太多。