如何在点击保存后关闭carbon-components-react的ModalWrapper弹窗

ModalWrapper为受控组件，默认未内置保存触发自动关闭的逻辑，需要手动触发关闭操作，常用的两种实现方式如下：

方法1：通过父组件受控状态控制开关 #

• 在父组件维护控制弹窗显隐的状态：const [isModalOpen, setIsModalOpen] = useState(false)
• 将状态绑定到ModalWrapper的open属性上
• 在onSave保存回调执行完成后，手动修改状态关闭弹窗

示例代码：

import { useState } from 'react';
import { ModalWrapper, Button } from 'carbon-components-react';

function YourComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleSave = () => {
    // 执行你的自定义保存逻辑
    // ...
    // 保存完成后修改状态关闭弹窗
    setIsModalOpen(false);
  }

  return (
    <>
      <Button onClick={() => setIsModalOpen(true)}>打开弹窗</Button>
      <ModalWrapper
        open={isModalOpen}
        onRequestClose={() => setIsModalOpen(false)}
        onSave={handleSave}
        modalHeading="操作弹窗"
        primaryButtonText="保存"
        secondaryButtonText="取消"
      >
        弹窗内容区域
      </ModalWrapper>
    </>
  )
}

方法2：使用ModalWrapper注入的内置关闭方法 #

如果保存按钮定义在ModalWrapper的子组件内部，可直接调用组件注入给子元素的handleClose方法触发关闭：

// 弹窗内部内容组件
const ModalContent = ({ handleClose }) => {
  const handleSave = () => {
    // 执行自定义保存逻辑
    // ...
    // 直接调用内置方法关闭弹窗
    handleClose();
  }
  return <Button onClick={handleSave}>内部保存按钮</Button>
}

// 父组件调用示例
<ModalWrapper
  open={isModalOpen}
  onRequestClose={() => setIsModalOpen(false)}
  modalHeading="操作弹窗"
>
  <ModalContent />
</ModalWrapper>

注意：必须绑定onRequestClose回调处理点击遮罩、取消按钮、右上角关闭按钮的关闭逻辑，否则这些场景下弹窗也无法正常关闭。

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