53 lines
1.6 KiB
Markdown
53 lines
1.6 KiB
Markdown
|
---
|
|||
|
|
name: jjb-modal-example
|
|||
|
|
description: 定义 JJB 项目弹窗使用示例。在实现 Modal、InjectContext、Form 或 styles.body 时参考。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 弹窗（Modal）规范
|
|||
|
|
|
|||
|
|
- **使用示例**：
|
|||
|
|
```javascript
|
|||
|
|
import { useContext, useState } from 'react';
|
|||
|
|
import { Modal, Form, Input } from 'antd';
|
|||
|
|
import { InjectContext } from '~/enumerate/context';
|
|||
|
|
|
|||
|
|
function UserList({ createUserAction }) {
|
|||
|
|
const context = useContext(InjectContext);
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (values) => {
|
|||
|
|
await createUserAction(values);
|
|||
|
|
context.message.success('创建成功！');
|
|||
|
|
setModalOpen(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<button onClick={() => setModalOpen(true)}>新增用户</button>
|
|||
|
|
{/* ✅ 正确：使用 <Modal> 组件标签 */}
|
|||
|
|
<Modal
|
|||
|
|
open={modalOpen}
|
|||
|
|
title="新增用户"
|
|||
|
|
onCancel={() => setModalOpen(false)}
|
|||
|
|
footer={null}
|
|||
|
|
styles={{
|
|||
|
|
body: {
|
|||
|
|
maxHeight: 'calc(100vh - 200px)',
|
|||
|
|
overflow: 'auto'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Form form={form} layout="vertical" onFinish={handleSubmit}>
|
|||
|
|
<Form.Item name="name" label="用户名">
|
|||
|
|
<Input placeholder="请输入用户名" allowClear />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item name="email" label="邮箱">
|
|||
|
|
<Input placeholder="请输入邮箱" allowClear />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|