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

猜你喜欢

转载自blog.csdn.net/chendongpu/article/details/114761592
今日推荐