antd表单的使用

import React from 'react'
import {Form,Card,Input,Button,message} from 'antd'
import {Debounce} from 'react-lodash'
function Edit(props) {
     const [form]=Form.useForm()
     const onFinish=(value)=>{
         console.log(value)
        message.success("提交成功")
     }
     const onFinishFailed=()=>{
        message.error("请输入正确的内容")
     }
        return (
        <Card title="商品编辑">
            <Form   onFinish={onFinish} onFinishFailed={onFinishFailed}>
                <Form.Item 
                label="商品名" 
                name="proName" 
                rules={[{ required: true ,message:"商品名是必填项"}]}
                >
                   <Input placeholder="请输入商品名字" />                                              
                </Form.Item>
                <Form.Item 
                label="价格" 
                name="proPrice" 
                rules={[
                    { 
                        required: true ,
                        message:"商品价格是必填项",
                    },
                    {
                        validator:async(_,proPrice)=>{
                            if(proPrice>100)
                            {
                                return Promise.reject(new Error('商品价格不能超过100'));
                            }
                            else
                            {
                                return Promise.resolve();
                            }
                        }
                    }
                ]}
                
                >
                   <Input placeholder="请输入商品价格" />                                              
                </Form.Item>
                <Form.Item >
                    <Button htmlType="submit" type="primary" >保存</Button>
                </Form.Item>
            </Form>
        </Card>
    )
}

// @ts-ignore
/**
 * 背景：在使用Ant Design3.x Form组件时，
 * Form组件提供了一个create方法，使用form.create()(component)处理之后的component 
 * 会接收到一个props.form，
 * 使用props.form下的一系列方法，便可以很方便的写出具备自动校验功能的表单。
 */
export default Edit