--- order: 4 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. ````jsx import { Button, Modal, Form, Input, Radio, } from 'antd'; const FormItem = Form.Item; const CollectionCreateForm = Form.create()( // eslint-disable-next-line class extends React.Component { render() { const { visible, onCancel, onCreate, form, } = this.props; const { getFieldDecorator } = form; return (
{getFieldDecorator('title', { rules: [{ required: true, message: 'Please input the title of collection!' }], })( )} {getFieldDecorator('description')()} {getFieldDecorator('modifier', { initialValue: 'public', })( Public Private )}
); } } ); class CollectionsPage extends React.Component { state = { visible: false, }; showModal = () => { this.setState({ visible: true }); } handleCancel = () => { this.setState({ visible: false }); } handleCreate = () => { const form = this.formRef.props.form; form.validateFields((err, values) => { if (err) { return; } console.log('Received values of form: ', values); form.resetFields(); this.setState({ visible: false }); }); } saveFormRef = (formRef) => { this.formRef = formRef; } render() { return (
); } } ReactDOM.render(, mountNode); ```` ````css .collection-create-form_last-form-item { margin-bottom: 0; } ````