注意:仅针对:Antd版本号:4.16.11
Antd官方在“动态增减嵌套字段”模块,默认只展示一个添加按钮。
需求:进入页面默认展示一行字段。
思路:
1、我先在控制台输出“fields”,得到如下数据:
2、点击“Add field”后:
3、我想,如何初始化这个fields呢?看文档的时候看到了“form.setFieldsValue”,但并不是。之后想到初始值,于是把控制台数据构造进了initialValue中。
解决方法:使用<Form.List>中提供的initialValue参数。
关键代码展示:
<Form.List
name="launch_scope"
initialValue={[{
fieldKey: 0,
isListField: true,
key: 0,
name: 0
}]}
>
......
</Form.List>
效果图:
完整代码展示:
import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
const Demo = () => {
const onFinish = values => {
console.log('Received values of form:', values);
};
return (
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
<Form.List name="users">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...restField}
name={[name, 'first']}
fieldKey={[fieldKey, 'first']}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'last']}
fieldKey={[fieldKey, 'last']}
rules={[{ required: true, message: 'Missing last name' }]}
>
<Input placeholder="Last Name" />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
ReactDOM.render(<Demo />, mountNode);