CreateForm.tsx
1.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { Form, Input, Modal } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import React from 'react';
const FormItem = Form.Item;
interface CreateFormProps extends FormComponentProps {
modalVisible: boolean;
handleAdd: (fieldsValue: { desc: string }) => void;
handleModalVisible: () => void;
}
const CreateForm: React.FC<CreateFormProps> = props => {
const { modalVisible, form, handleAdd, handleModalVisible } = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleAdd(fieldsValue);
});
};
return (
<Modal
destroyOnClose
title="新建规则"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
{form.getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入至少五个字符的规则描述!', min: 5 }],
})(<Input placeholder="请输入" />)}
</FormItem>
</Modal>
);
};
export default Form.create<CreateFormProps>()(CreateForm);