mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
120 lines
2.7 KiB
Markdown
120 lines
2.7 KiB
Markdown
|
---
|
||
|
order: 14
|
||
|
title:
|
||
|
zh-CN: 弹出层中的新建表单
|
||
|
en-US: Form in Modal to Create
|
||
|
---
|
||
|
|
||
|
## zh-CN
|
||
|
|
||
|
当用户访问一个展示了某个列表的页面,想新建一项但又不想跳转页面时,可以用 Modal 弹出一个表单,用户填写必要信息后创建新的项。
|
||
|
|
||
|
## 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 { 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] = React.useState(false);
|
||
|
|
||
|
const onCreate = values => {
|
||
|
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>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
ReactDOM.render(<CollectionsPage />, mountNode);
|
||
|
```
|
||
|
|
||
|
```css
|
||
|
.collection-create-form_last-form-item {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
```
|