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>
...

 

posted @ 2022-06-28 20:32  bug制造者~~  阅读(245)  评论(0)    收藏  举报