antd form保单数据回显
时间: 2024-09-27 12:09:59 浏览: 26
antd 的 Form 组件提供了一个强大的表单管理工具,其中处理保单数据的回显通常涉及到 `getFieldDecorator` 和 `initialValue` 或者 `valuePropName` 的配合。假设你有一个名为 `policyInfo` 的字段需要保存保单信息,你可以这样做:
```jsx
import { Form, Input, Button } from 'antd';
const { Field } = Form;
// 假设 policyInfo 是一个对象,包含多个字段如 policyNumber、policyStartDate 等
const PolicyForm = () => {
const { getFieldDecorator } = Form;
// 初始化保单数据,可以来自服务器或本地存储
const initialPolicyInfo = {
policyNumber: '',
policyStartDate: '',
... // 其他字段
};
return (
<Form>
<Field name="policyInfo" initialValue={initialPolicyInfo}>
{(props) => (
<Form.Item label="保单信息">
{/* 使用 Input 组件或其他控件,并将动态值绑定到 props.value */}
<Input {...props} />
</Form.Item>
)}
</Field>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form>
);
};
```
当你从后台获取到用户以前填写的保单数据并希望显示在初始状态时,只需要设置 `initialValue` 属性为相应的对象即可。`getFieldDecorator` 可以帮助你自动处理表单验证和其他 Form 相关的功能。