0
点赞
收藏
分享

微信扫一扫

antd form表单回填数据

antd新版本的不能用useState配合initialValue回填数据

新版本的回填数据是这样的

...
const [form] = Form.useForm();
useEffect(()=>{
if(props.match.params.id){
oneApi(props.match.params.id).then(res=>{
console.log("res",res);
form.setFieldsValue({name:res.product.name,price:res.product.price});
})
}
},[]);

...

<Form
form={form}
{...layout}
name="basic"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="名字"
name="name"
rules={[{ required: true, message: '请输入商品名字!' }]}
>
<Input placeholder="请输入商品名字" />
</Form.Item>


<Form.Item
label="价格"
name="price"
rules={[
// { required: true, message: '请输入商品价格!' },
{
validator: (_, value) =>{
console.log("value",value);
return value ? Promise.resolve() : Promise.reject(new Error('自定义规则,你应该输入商品价格'))
}

}
]}

>
<Input />
</Form.Item>

<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
保存
</Button>
</Form.Item>
</Form>
...


 

举报

相关推荐

0 条评论