--- 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 { Button, Form, Input, Modal, Radio } from 'antd'; import React, { useState } from 'react'; interface Values { title: string; description: string; modifier: string; } interface CollectionCreateFormProps { open: boolean; onCreate: (values: Values) => void; onCancel: () => void; } const CollectionCreateForm: React.FC = ({ open, onCreate, onCancel, }) => { const [form] = Form.useForm(); return ( { form .validateFields() .then(values => { form.resetFields(); onCreate(values); }) .catch(info => { console.log('Validate Failed:', info); }); }} >
Public Private
); }; const App: React.FC = () => { const [open, setOpen] = useState(false); const onCreate = (values: any) => { console.log('Received values of form: ', values); setOpen(false); }; return (
{ setOpen(false); }} />
); }; export default App; ``` ```css .collection-create-form_last-form-item { margin-bottom: 0; } ```