如何实现打开新Chakra UI模态框时自动关闭前一个模态框？

你的思路完全正确，通过传入前一个模态框的关闭方法，在打开新模态框前调用它就能实现需求。可以优化代码写法，让逻辑更直观：

优化后的代码实现 #

function GetFundsDetails({ onClose: onClosePrevious }: Omit<ModalProps, 'children'>) {
  const { isOpen, onClose, onOpen } = useDisclosure();

  const handleOpenSecondModal = () => {
    // 先关闭前一个模态框
    onClosePrevious();
    // 再打开第二个模态框
    onOpen();
  };

  return (
    <Box>
      <Button onClick={handleOpenSecondModal}>
        Click me to open another modal
      </Button>
      <SecondModalToOpen isOpen={isOpen} onClose={onClose} />
    </Box>
  );
}

关键说明 #

• 无需额外封装高阶函数，直接在点击事件处理函数里依次执行关闭、打开逻辑，代码更简洁易读。
• 确保onClosePrevious是父组件传入的有效模态框关闭方法，调用时才能正确关闭第一个模态框。
• 执行顺序不能颠倒：必须先关闭前一个模态框，再打开新模态框，避免出现两个模态框短暂同时显示的问题。

如果你的原有代码已经能正常运行，那当前实现是有效的，优化后的写法只是让代码逻辑更清晰。

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