57 lines
1.4 KiB
TypeScript

import { Form, Input } from "antd";
import React, { useImperativeHandle, forwardRef } from "react";
interface DatasetFormProps {
initialValues?: {
name?: string;
description?: string;
};
}
export interface DatasetFormRef {
resetFields: () => void;
validateFields: () => Promise<{ name: string; description: string }>;
getFieldsValue: () => { name: string; description: string };
}
const DatasetForm: React.ForwardRefRenderFunction<DatasetFormRef, DatasetFormProps> = (
{ initialValues },
ref
) => {
const [form] = Form.useForm();
useImperativeHandle(ref, () => ({
resetFields: () => {
form.resetFields();
},
validateFields: () => {
return form.validateFields();
},
getFieldsValue: () => {
return form.getFieldsValue();
},
}));
return (
<Form form={form} layout="vertical" initialValues={initialValues}>
<Form.Item
label="数据集名称"
name="name"
rules={[{ required: true, message: "请输入数据集名称" }]}
>
<Input placeholder="请输入数据集名称" />
</Form.Item>
<Form.Item
label="数据集描述"
name="description"
rules={[{ required: true, message: "请输入数据集描述" }]}
>
<Input.TextArea rows={4} placeholder="请输入数据集描述" />
</Form.Item>
</Form>
);
};
export default forwardRef(DatasetForm);