ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.13k stars 8.12k forks source link

[问题 | question]下拉菜单Dropdown中使用ModalForm,默认显示 #11264

Open marsDes opened 3 weeks ago

marsDes commented 3 weeks ago

🧐 问题描述 | Problem description

Dropdown的menu 是一个ModalForm 组件,默认显示open={true} 不生效

💻 示例代码 | Sample code

export default () => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  const [isOpen, setIsOpen] = useState(true); // 初始化为 true 以默认显示

  const items: MenuProps["items"] = [
    {
      key: "1",
      label: (
        <ModalForm<{
          name: string;
          company: string;
        }>
          title="新建表单"
          trigger={
            <Button type="primary">
              <PlusOutlined />
              新建表单
            </Button>
          }
          open={isOpen}
          form={form}
          autoFocusFirstInput
          modalProps={{
            destroyOnClose: true,
            onCancel: () => setIsOpen(false),
          }}
          submitTimeout={2000}
          onFinish={async (values) => {
            setIsOpen(false); // 提交后关闭模态框
            return true;
          }}
        >
          <ProFormText
            width="xs"
            name="managerName"
            label="商务经理"
          />
        </ModalForm>
      ),
    },
  ];
  return (
    <Dropdown menu={{ items }}>
      <div>下拉菜单</div>
    </Dropdown>
  );
};

🚑 其他信息 | Other information

在线demo