我正在尝试从 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文件和你的主要组件中做了什么，所以我不能说太多。