mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 06:09:34 +08:00
6776bb8916
* docs: update demo * chore: add script * test: fix demo test * docs: convert demos * chore: move script * test: remove react-dom import * chore: update deps * docs: update riddle js * test: fix image test * docs: fix riddle demo
123 lines
2.9 KiB
Markdown
123 lines
2.9 KiB
Markdown
---
|
||
order: 14
|
||
title:
|
||
zh-CN: 弹出层中的新建表单
|
||
en-US: Form in Modal to Create
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
|
||
|
||
> 🛎️ 想要 3 分钟实现？试试 ProForm 的 [Modal 表单](https://procomponents.ant.design/components/form#modal-%E8%A1%A8%E5%8D%95)！
|
||
|
||
## en-US
|
||
|
||
When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
|
||
|
||
```tsx
|
||
import React, { useState } from 'react';
|
||
import { Button, Modal, Form, Input, Radio } from 'antd';
|
||
|
||
interface Values {
|
||
title: string;
|
||
description: string;
|
||
modifier: string;
|
||
}
|
||
|
||
interface CollectionCreateFormProps {
|
||
visible: boolean;
|
||
onCreate: (values: Values) => void;
|
||
onCancel: () => void;
|
||
}
|
||
|
||
const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||
visible,
|
||
onCreate,
|
||
onCancel,
|
||
}) => {
|
||
const [form] = Form.useForm();
|
||
return (
|
||
<Modal
|
||
visible={visible}
|
||
title="Create a new collection"
|
||
okText="Create"
|
||
cancelText="Cancel"
|
||
onCancel={onCancel}
|
||
onOk={() => {
|
||
form
|
||
.validateFields()
|
||
.then(values => {
|
||
form.resetFields();
|
||
onCreate(values);
|
||
})
|
||
.catch(info => {
|
||
console.log('Validate Failed:', info);
|
||
});
|
||
}}
|
||
>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
name="form_in_modal"
|
||
initialValues={{ modifier: 'public' }}
|
||
>
|
||
<Form.Item
|
||
name="title"
|
||
label="Title"
|
||
rules={[{ required: true, message: 'Please input the title of collection!' }]}
|
||
>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="description" label="Description">
|
||
<Input type="textarea" />
|
||
</Form.Item>
|
||
<Form.Item name="modifier" className="collection-create-form_last-form-item">
|
||
<Radio.Group>
|
||
<Radio value="public">Public</Radio>
|
||
<Radio value="private">Private</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
const CollectionsPage = () => {
|
||
const [visible, setVisible] = useState(false);
|
||
|
||
const onCreate = (values: any) => {
|
||
console.log('Received values of form: ', values);
|
||
setVisible(false);
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
setVisible(true);
|
||
}}
|
||
>
|
||
New Collection
|
||
</Button>
|
||
<CollectionCreateForm
|
||
visible={visible}
|
||
onCreate={onCreate}
|
||
onCancel={() => {
|
||
setVisible(false);
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default () => <CollectionsPage />;
|
||
```
|
||
|
||
```css
|
||
.collection-create-form_last-form-item {
|
||
margin-bottom: 0;
|
||
}
|
||
```
|