关闭 antd popover 并在同一个函数中打开一个子 antd modal

Question

我有一个 Antd 弹出窗口，通过单击其内容中的一个按钮，可以打开一个模式。我想在模式打开时关闭弹出窗口。

当我尝试将弹出窗口可见性状态 setter 作为道具传递给模态时，出现了问题。模态状态和 popover 传递的 prop 状态之间存在某种“冲突”：

Collision CodeSandbox example

我确实找到了一个解决方法——在父组件（弹出窗口）中创建模态状态变量并使用 props 将它们传递给模态：

Working CodeSandbox example

首先，您会注意到模态框没有按预期关闭 - 没有很好的平滑动画将它最小化，它只是突然消失了。作为参考，您可以查看 here 以了解关闭时的外观。

所以我的问题是 - 为什么会发生这种碰撞？有更好的方法解决吗？

谢谢！

Answer 1

发生此冲突是因为在 show modal handler 中，您将 popover 的可见性设置为 false 并将其隐藏，并将 ant-popover-hidden class 添加到它的 div 元素中，因此其中的任何内容都不会显示像 Modal 但是你显示模态但是因为它的父级它不可见，所以我认为你必须将模态与弹出内容分开并将它放在它们旁边的某个地方，如下所示：

const Test = () => {
  const [isSharePopoverVisible, setIsSharePopoverVisible] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const handlePopoverVisibleChange = () => {
    setIsSharePopoverVisible(!isSharePopoverVisible);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const showModal = () => {
    setIsModalVisible(true);
    setIsSharePopoverVisible(false);
  };

  return (
    <>
      <Popover
        trigger="click"
        title="Test"
        visible={isSharePopoverVisible}
        onVisibleChange={handlePopoverVisibleChange}
        content={
          <Button type="primary" onClick={showModal}>
            Open Modal
          </Button>
        }
      >
        <Button>Test</Button>
      </Popover>
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

关闭 antd popover 并在同一个函数中打开一个子 antd modal

Close antd popover and open a child antd modal in the same function

reactjs

antd

react-props

react-hooks

react-state