ant design框架 Form.List怎么能默认显示3条输入姓名手机号的表单
时间: 2023-07-16 08:14:02 浏览: 194
解决ant Design中this.props.form.validateFields未执行的问题
你可以在Form.List组件中设置initialValues属性来指定默认显示的表单数据。具体步骤如下:
1. 在Form.List组件中添加initialValues属性,该属性的值为一个对象数组,数组中每个对象表示一个默认显示的表单数据。
2. 在每个对象中添加name和phone属性,分别表示姓名和手机号码。
下面是一个示例代码:
```
<Form.List name="users" initialValues={[
{ name: '张三', phone: '13812345678' },
{ name: '李四', phone: '13987654321' },
{ name: '王五', phone: '13611112222' }
]}>
{(fields, { add, remove }) => {
return (
<>
{fields.map((field, index) => (
<Form.Item
label={`用户 ${index + 1}`}
key={field.key}
>
<Form.Item
{...field}
name={[field.name, 'name']}
fieldKey={[field.fieldKey, 'name']}
rules={[{ required: true, message: '请输入姓名' }]}
>
<Input placeholder="姓名" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'phone']}
fieldKey={[field.fieldKey, 'phone']}
rules={[{ required: true, message: '请输入手机号码' }]}
>
<Input placeholder="手机号码" />
</Form.Item>
</Form.Item>
))}
</>
);
}}
</Form.List>
```
在上面的示例代码中,我们在Form.List组件中设置了initialValues属性,并分别指定了三个用户的姓名和手机号码。在渲染表单时,Form.List组件会自动根据initialValues属性值来显示三条表单数据。
阅读全文