react函数组件+ts+antd实现基本表单

使用React函数组件以及antd实现基本的表单，实现效果如下图所示，具有基本的表单校验功能

import React, { FC, useState } from "react";
import { Button, Checkbox, Form, Input } from "antd";

const Test: FC = () => {
    const [profileNameLength, setProfileNameLength] = useState(0);   画像名称长度

    const [form] = Form.useForm();

    const plainOptions = ['Apple', 'Pear', 'Orange'];

    const createModal = async () => {
        form.validateFields().then(async values => {
            console.log(`表单数据：${form.getFieldsValue()}`)
        }).catch(info => {
                console.log('Validate Failed:', info);
            });

    };

    return (
        

            

                    

                        
                            
                        
                        
                             setProfileNameLength(e.target.value.length)}
                                suffix={
                                    {profileNameLength}/20
                                }
                            />
                        
                        
                            
                        
                         createModal()}>创建
                    
                
        
    )
}

export default Test

``