如何实现单次点击隐藏登录模态框并显示注册模态框

你遇到的现象本质是两个状态更新时出现了逻辑冲突，常见触发原因及解决方案如下：

• 原因1：点击事件冒泡
  如果你的register now!文本写在登录Modal内部，登录Modal通常会绑定「点击遮罩层关闭Modal」的事件，你点击文本时事件会向上冒泡触发登录Modal的关闭逻辑，可能顺带把刚打开的注册Modal也误关了。
  解决方案：给点击事件加阻止冒泡逻辑，代码修改如下：

<div>
  <p onClick={(e) => {
    e.stopPropagation() // 新增这一行阻止事件冒泡
    setShowModal(false);
    setShowModalr(true);
  }}>register now!</p>
  {showModalr && (
    <RegisterModal
      showModalr={showModalr}
      setShowModalr={setShowModalr}
    />
  )}
</div>

• 原因2：多状态更新不同步
  React18及以上版本会对同一事件回调内的多次状态更新做批量处理，少数场景下两个布尔状态的更新可能出现时序冲突，优先推荐单状态控制的写法，逻辑更清晰也不会出现多状态不同步的问题，改造方案如下：

// 声明状态，可选值为 login/register/null，分别对应展示登录modal、注册modal、不展示任何modal
const [activeModal, setActiveModal] = useState('login')

// 切换注册逻辑
<p onClick={() => setActiveModal('register')}>register now!</p>

// 全局Modal渲染逻辑，建议放在组件根节点下同级渲染
{activeModal === 'login' && (
  <LoginModal 
    onClose={() => setActiveModal(null)} 
  />
)}
{activeModal === 'register' && (
  <RegisterModal 
    onClose={() => setActiveModal(null)} 
  />
)}

• 额外检查项：确认两个Modal的渲染位置是同级，不要嵌套在另一个Modal的内部DOM结构中，避免父Modal隐藏时连带子Modal一起被卸载。

内容的提问来源于stack exchange，提问作者Animesh Bhardwaj