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
antd表单的使用
最新推荐文章于 2024-04-11 18:18:17 发布