import React from 'react' ; import { Form , Input , Modal } from 'antd' ; import type { TableListItem } from '../data.d' ; const FormItem = Form . Item ; type CreateFormProps = { modalVisible : boolean ; onSubmit : ( fieldsValue : TableListItem ) => void ; onCancel : ( ) => void ; } ; const CreateForm = ( props ) => { const [ form ] = Form . useForm ( ) ; const { modalVisible , onSubmit : handleAdd , onCancel } = props ; const okHandle = async ( ) => { const fieldsValue = ( await form . validateFields ( ) ) as TableListItem ; form . resetFields ( ) ; handleAdd ( fieldsValue ) ; } ; return ( < Modal destroyOnClose title = "新建规则" visible = { modalVisible } onOk = { okHandle } onCancel = { ( ) => { onCancel ( ) ; } } > < Form form = { form } > < FormItem labelCol = { { span : 5 } } wrapperCol = { { span : 15 } } label = "描述" name = "desc" rules = { [ { required : true , message : '请输入至少五个字符的规则描述！' , min : 5 } ] } > < Input placeholder = "请输入" / > < /FormItem> < /Form> < /Modal>); } ; export default CreateForm ;