React.js中登录模态框打开忘记密码模态框时原模态框未关闭的问题求助

你遇到的核心问题是两个模态框的状态完全独立，点击“忘记密码”时只会触发自己的显示逻辑，却没有同步关闭登录模态框。下面给你两种实用的解决方案，按需选择即可：

方案一：将忘记密码的状态提升到登录组件统一管理 #

把忘记密码模态框的显示/隐藏状态移到登录组件中，这样就能在点击“忘记密码”时，同时控制两个模态框的切换：

修改后的登录组件代码 #

// 登录模态框状态
const [showLogin, setShowLogin] = useState(false);
// 忘记密码模态框状态
const [showForgotPass, setShowForgotPass] = useState(false);

// 关闭登录模态框
const handleCloseLogin = () => setShowLogin(false);
// 打开登录模态框
const handleShowLogin = () => setShowLogin(true);

// 打开忘记密码框前先关闭登录框
const handleSwitchToForgotPass = () => {
  setShowLogin(false);
  setShowForgotPass(true);
};

// 关闭忘记密码模态框
const handleCloseForgotPass = () => setShowForgotPass(false);

<>
  <p onClick={handleShowLogin}>LOGIN</p>
  {/* 登录模态框 */}
  <Modal show={showLogin} onHide={handleCloseLogin} className="p-5 authpop">
    <Modal.Header closeButton onClick={handleCloseLogin}>
      <Modal.Title> Log In </Modal.Title>
    </Modal.Header>
    <Form className=" p-3" onSubmit={handleSubmit}>
      {/* 省略原有表单输入项... */}
      <Form.Group className="mb-3 loginlsRw">
        <div className="forgottLink eqSpace justify-content-start">
          {/* 直接绑定切换方法 */}
          <p onClick={handleSwitchToForgotPass}>Forgott Password</p>
        </div>
      </Form.Group>
    </Form>
  </Modal>

  {/* 忘记密码模态框直接放在登录组件内 */}
  <Modal show={showForgotPass} onHide={handleCloseForgotPass} className="p-5 authpop">
    <Modal.Header closeButton onClick={handleCloseForgotPass}>
    </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">
        Send Reset Link
      </Form.Group>
    </Form>
  </Modal>
</>

方案二：给忘记密码组件传递回调方法 #

如果想保留ForgottPassw组件的独立性，只需要给它传递一个关闭登录模态框的回调函数，在打开自己的模态框时触发：

修改后的登录组件部分代码 #

// 原有登录状态和方法不变
<Form.Group className="mb-3 loginlsRw">
  <div className="forgottLink eqSpace justify-content-start">
    {/* 传递关闭登录框的回调给子组件 */}
    <ForgottPassw onOpenForgot={() => handleClose()} />
  </div>
</Form.Group>

修改后的ForgottPassw组件 #

const ForgottPassw = ({ onOpenForgot }) => { 
  const [Fogshow, setFogShow] = useState(false); 
  const [showBtn, setShowBtn] = useState(false); 
  const handleFogClose = () => setFogShow(false); 
  const handleFogShow = () => {
    // 先调用父组件的关闭登录框方法
    onOpenForgot();
    // 再打开自己的模态框
    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> 
      </Modal> 
    </> 
  ); 
}

这两种方案都能实现点击“忘记密码”时自动关闭登录模态框、打开忘记密码模态框的效果。方案一更适合两个模态框关联性强的场景，方案二更适合组件需要复用的场景。

内容的提问来源于stack exchange，提问作者Yogesh Pednekar