技術標籤：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