React中点击模态框内链接如何切换打开另一模态框？

问题描述 #

需要实现：点击SignUp模态框内的「sign in」链接时打开SignIn模态框；点击SignIn模态框内的「create new account」链接时打开SignUp模态框。

当前代码的问题 #

你的代码中，SignUp和SignIn组件各自维护了内部的modal_standard状态，与父组件Navbar传递的isOpen props不同步，导致切换模态框时状态混乱——比如点击切换链接后，当前模态框可能没关闭，或者目标模态框没正确打开。

修正方案 #

让模态框的状态完全由父组件Navbar统一管理，子组件不再维护内部状态，通过props接收状态和操作方法。

1. 调整Navbar组件

新增模态框的切换方法，统一控制两个模态框的显示状态：

const Navbar: React.FC = () => { 
  const [isSignInModalOpen, setSignInModalOpen] = useState<boolean>(false);
  const [isSignUpModalOpen, setSignUpModalOpen] = useState<boolean>(false);

  // 打开SignIn模态框，同时关闭SignUp
  const openSignInModal = () => {
    setSignUpModalOpen(false);
    setSignInModalOpen(true);
  };

  // 打开SignUp模态框，同时关闭SignIn
  const openSignUpModal = () => {
    setSignInModalOpen(false);
    setSignUpModalOpen(true);
  };

  // 切换SignUp模态框的显示状态
  const toggleSignUpModal = () => {
    setSignUpModalOpen(prev => !prev);
  };

  // 切换SignIn模态框的显示状态
  const toggleSignInModal = () => {
    setSignInModalOpen(prev => !prev);
  };

  return (
    <div>
      <SignUp 
        isOpen={isSignUpModalOpen} 
        openSignInModal={openSignInModal} 
        toggleSignUpModal={toggleSignUpModal}
      />
      <SignIn 
        isOpen={isSignInModalOpen} 
        openSignUpModal={openSignUpModal}
        toggleSignInModal={toggleSignInModal}
      />
    </div>
  )
}

2. 修改SignUp组件

移除内部状态，完全依赖父组件传递的props：

interface SignUpProps {
  mobile?: boolean;
  isOpen: boolean;
  openSignInModal: () => void;
  toggleSignUpModal: () => void;
}

const SignUp: React.FC<SignUpProps> = ({ openSignInModal, isOpen, toggleSignUpModal }) => {
  return (
    <>
      <Button onClick={toggleSignUpModal}>
        sign up
      </Button>
      <Modal 
        id="myModal"
        isOpen={isOpen}
        toggle={toggleSignUpModal} 
      >
        {/* 模态框内部内容 */}
        <ModalFooter>
          <p>
            have already account
            <span onClick={() => {
              // 先关闭当前模态框，再打开SignIn
              toggleSignUpModal();
              openSignInModal();
            }}>
              sign in
            </span>
          </p>
        </ModalFooter>
      </Modal>
    </>
  )
}

export default SignUp

3. 修改SignIn组件

同样移除内部状态，依赖父组件的props：

interface SignInProps {
  mobile?: boolean;
  isOpen: boolean;
  openSignUpModal: () => void;
  toggleSignInModal: () => void;
}

const SignIn: React.FC<SignInProps> = ({ isOpen, openSignUpModal, toggleSignInModal }) => {
  return (
    <>
      <Button onClick={toggleSignInModal}>
        Sign In
      </Button>
      <Modal 
        id="myModal"
        isOpen={isOpen}
        toggle={toggleSignInModal}
      >
        {/* 模态框内部内容 */}
        <ModalFooter>
          <Button color="light">
            Sign in
          </Button>
          <p>
            don't have account?
            <span 
              style={{ color: '#827E4A', cursor: 'pointer' }} 
              onClick={() => {
                // 先关闭当前模态框，再打开SignUp
                toggleSignInModal();
                openSignUpModal();
              }}
            >
              create new account
            </span>
          </p>
        </ModalFooter>
      </Modal>
    </>
  )
}

关键修改点 #

• 移除子组件内部的模态框状态，让父组件统一管理，避免多源状态导致的不一致。
• 切换模态框时先关闭当前模态框，再打开目标模态框，确保状态同步。
• 所有模态框的打开/关闭操作都由父组件控制，子组件只负责触发对应的方法。

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