ant-design/components/form/demo/form-in-modal.md

120 lines
2.9 KiB
Markdown
Raw Normal View History

2016-04-12 16:12:13 +08:00
---
order: 4
2016-08-02 09:34:04 +08:00
title:
zh-CN: 弹出层中的新建表单
en-US: Form in Modal to Create
2016-04-12 16:12:13 +08:00
---
2016-04-12 15:18:57 +08:00
2016-07-31 09:53:51 +08:00
## zh-CN
当用户访问一个展示了某个列表的页面,想新建一项但又不想跳转页面时,可以用 Modal 弹出一个表单,用户填写必要信息后创建新的项。
2016-04-12 15:18:57 +08:00
2016-07-31 09:53:51 +08:00
## en-US
2018-04-03 22:00:31 +08:00
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.
2016-07-31 09:53:51 +08:00
2017-02-13 10:55:53 +08:00
````jsx
2018-11-28 15:00:03 +08:00
import {
Button, Modal, Form, Input, Radio,
} from 'antd';
2018-06-27 15:55:04 +08:00
2016-04-12 15:18:57 +08:00
const FormItem = Form.Item;
const CollectionCreateForm = Form.create()(
2018-11-28 15:00:03 +08:00
// eslint-disable-next-line
class extends React.Component {
render() {
2018-11-28 15:00:03 +08:00
const {
visible, onCancel, onCreate, form,
} = this.props;
const { getFieldDecorator } = form;
return (
<Modal
visible={visible}
title="Create a new collection"
okText="Create"
onCancel={onCancel}
onOk={onCreate}
>
<Form layout="vertical">
<FormItem label="Title">
{getFieldDecorator('title', {
rules: [{ required: true, message: 'Please input the title of collection!' }],
})(
<Input />
)}
</FormItem>
<FormItem label="Description">
{getFieldDecorator('description')(<Input type="textarea" />)}
</FormItem>
<FormItem className="collection-create-form_last-form-item">
{getFieldDecorator('modifier', {
initialValue: 'public',
})(
<Radio.Group>
<Radio value="public">Public</Radio>
<Radio value="private">Private</Radio>
</Radio.Group>
)}
</FormItem>
</Form>
</Modal>
);
}
}
);
class CollectionsPage extends React.Component {
state = {
visible: false,
};
2018-06-27 15:55:04 +08:00
showModal = () => {
2016-04-12 15:18:57 +08:00
this.setState({ visible: true });
}
2018-06-27 15:55:04 +08:00
handleCancel = () => {
2016-04-12 15:18:57 +08:00
this.setState({ visible: false });
}
2018-06-27 15:55:04 +08:00
handleCreate = () => {
const form = this.formRef.props.form;
form.validateFields((err, values) => {
if (err) {
return;
}
2016-04-12 15:18:57 +08:00
console.log('Received values of form: ', values);
form.resetFields();
this.setState({ visible: false });
});
}
2018-06-27 15:55:04 +08:00
saveFormRef = (formRef) => {
this.formRef = formRef;
}
2018-06-27 15:55:04 +08:00
2016-04-12 15:18:57 +08:00
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
wrappedComponentRef={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
/>
2016-04-12 15:18:57 +08:00
</div>
);
}
}
2016-04-12 15:18:57 +08:00
ReactDOM.render(<CollectionsPage />, mountNode);
````
2016-04-12 15:18:57 +08:00
````css
.collection-create-form_last-form-item {
margin-bottom: 0;
}
2016-04-12 15:18:57 +08:00
````