Antd的Form.List使用

这里介绍一下Antd的Form.List使用

				<Form from={form}>
					<Form.List name='zs' initialValue={[1, 2, 3]}>
                        {
                            (fields, { remove, add, move }) => {
                                return (
                                    <>
                                        {
                                            fields.map((field, index) => (
                                                <div key={index}>
                                                    <Form.Item {...field}>
                                                        <Input />
                                                    </Form.Item>
                                                    <Button
                                                        type='primary'
                                                        danger
                                                        onClick={() => remove(index)}
                                                    ><DeleteOutlined /></Button>
                                                    <Button onClick={() => move(index, index - 1)}>上移</Button>
                                                </div>
                                            ))
                                        }
                                        <Form.Item className={'text-center'}>
                                            <Button
                                                onClick={() => add()}
                                                type='primary'
                                                disabled={emailArr.length >= 10}
                                            >+继续添加</Button>
                                        </Form.Item>
                                    </>
                                );
                            }
                        }
                    </Form.List>
				</Form>

效果：

感觉官网的Form.List介绍不是很详细，但用了一下感觉很好用，复杂的功能可以简单实现，一行js也不需要写。

先说一下方法：

• 删除：remove是方法中第二个参数结构出来的，需要接收索引或索引数组
• 添加：add同样是方法中第二个参数结构出来的，可接收两个参数，一个是表单的默认值，一个是表单添加的位置，也可不接收参数，默认添加到最后一个位置且表单无默认值
• 移动：move同样是方法中第二个参数结构出来的，必须接收两个参数from和to，需要注意的是，这个方法不是拖拽，是位置的直接移动（插入）。

在说一下表单数据
Form.List就类似于Form.Item，它上面的name，同样可以被form.getFieldsValue()方法收集。

需要注意的是：上面代码中Form.Item不能有name属性，否则Form.List上的部分属性设置将会失效，比如：initialValue。另外，Form.Item下不能有除了表单意外的其他标签，且只能是一个表单，否则也会造成Form.List上的部分属性设置将会失效，比如：initialValue