【Antd】Form.List的强大之处，Form.List使用方式细微讲解

设想场景

有时候我们会遇到一些复杂的需求，需要用Table嵌套Form.List，逐层嵌套渲染表格表单列表，填写完毕后提交的复杂需求。

由于表单项分布在数据的各个层级里，因此，如何回填表单值就成了一个比较棘手的问题，处理不好，很容易引发一些逻辑bug（例如表单重置后，数据回填、表单校验异常等）

如何处理数据

其实，antd的form实例对象很强，只需要提供给它指定的field和索引i组成的formName（表单项名称）即可自动回填到表单项中，完全不需要人工干预去处理多层级的数据的，如果有需要转换数据结构，也可以先对form实例的指定表单属性进行数据处理，之后再赋值回该属性名即可。

示例：

...

// 初始化设置数据
useEffect(() => {
	// 由于提交的字段格式和回显的字段格式不一致，这边就是进行数据属性的处理
    const newData = reversalFormData(cloneDeep(data));
    // 设置完毕进行重置表单属性值，也就是上面提到的对属性进行转换，也可以自定义对数据处理
    form.setFieldsValue({
        schemeId: newData.schemeId,
        schemeList: newData.schemeList
    });
}, [data, form]);

return
(<div className={styles.formWrap}>
            <Form
                form={form}
                onValuesChange={onValuesChange}
                layout='vertical'
            >
                <Form.Item
                    hidden
                    name='schemeId'
                ></Form.Item>
                <BasicInfo
                    form={form}
                    data={data}
                />
                <ApplyScope form={form} />
                <WelfareInfo
                    form={form}
                    data={data}
                />
                <div className={styles.footer}>
                    <Button
                        className={styles.confirm}
                        onClick={onSubmit}
                        type='primary'
                        style={{ marginRight: 8 }}
                        htmlType='submit'
                    >
                        确定
                    </Button>
                    <Button
                        className={styles.cancel}
                        onClick={onClose}
                    >
                        取消
                    </Button>
                </div>
            </Form>
</div>)

表格+Form的处理方式：子组件的表格处理

const columns = [
{
    title: '基数(MOP)'
    key: 'macaoCardinalityDictValue',
    dataIndex: 'macaoCardinalityDictValue',
    render: (text, record, index) => (
        <SalaryBaseFormItem // 这个是Form.Item表单项的封装组件
            name={['socialSchemeOptionalList', index, 'macaoCardinalityDictValue']}
            label=''
            countryRegionType='MO'
            rules={[{ required: true, message: '请选择'}]}
            selectProps={{
                style: { width: 200 }
            }}
        />
    )
},
{
    title: '基数上限',
    key: 'cardinalityMaximum',
    dataIndex: 'cardinalityMaximum',
    render: (text, record, index) => (
        <Form.Item
            name={['socialSchemeOptionalList', index, 'cardinalityMaximum']}
            rules={[
                { required: true, message: '' },
                ({ getFieldValue }) => ({
                    validator(_, value) {
                    	// 这边包含了对表单项的自定义校验以及赋值的方式
                        const val = getFieldValue(['socialSchemeOptionalList', index, 'cardinalityMinimum']);
                        if (value < val) {
                            form.setFields([
                                {
                                    name: ['socialSchemeOptionalList', index, 'cardinalityMinimum'],
                                    errors: [intl.formatMessage({ id: 'LMID_00038092' })]
                                }
                            ]);
                            return Promise.reject(new Error(intl.formatMessage({ id: 'LMID_00038093' })));
                        }
                        form.setFields([
                            {
                                name: ['socialSchemeOptionalList', index, 'cardinalityMinimum'],
                                errors: undefined
                            }
                        ]);
                        return Promise.resolve();
                    }
                })
            ]}
        >
            <AmountInputNumber
                min={0}
                placeholder={intl.formatMessage({ id: 'LMID_00003499' })}
            />
        </Form.Item>
    )
},
]

...
<Form.Item name={'tableKey'}>
    <VVTable
        bordered
        columns={columns}
        loading={loading}
        dataSource={dataSource}
        // pagination={{ innerPagination: true }}
        sticky
        scroll={{ x: 'max-content' }}
    />
</Form.Item>

Form.List+Form的处理方式：子组件

return (
        <div className={styles.mainlandWelfare}>
            <Form.List name='socialSchemeChinaList'>
                {(fields, { add, remove }) => (
                    <>
                        {fields.length ? (
                            <>
                                {fields.map((field) => {
                                    // 删除户口类型模块
                                    const onRemove = () => {
                                        modal.confirm({
                                            title: '确定删除？',
                                            content: '删除后数据不可恢复，确定删除吗？',
                                            closable: true,
                                            onOk: () => {
                                                form.validateFields([['socialSchemeChinaList', field.name, 'accountTypeMap']], {
                                                    recursive: true
                                                });
                                                remove(field.name);
                                                message.success('删除成功');
                                            }
                                        });
                                    };
                                    return (
                                    	// 这是一个折叠面板，包含头部和内容区
                                        <WelfareCollapse
                                            items={[
                                                {
                                                    key: '1',
                                                    label: (
                                                        <AccountType
                                                            form={form}
                                                            field={field}
                                                        />
                                                    ),
                                                    children: (
                                                        <WelfareTable
                                                            form={form}
                                                            field={field}
                                                        >
                                                            <Button
                                                                type='default'
                                                                block
                                                                onClick={onRemove}
                                                                disabled={fields.length <= 1}
                                                            >
                                                                删除
                                                            </Button>
                                                        </WelfareTable>
                                                    )
                                                }
                                            ]}
                                        ></WelfareCollapse>
                                    );
                                })}
                                <Button
                                    className={styles.addAccountType}
                                    type='link'
                                    onClick={() => add({ details: [{}] })}
                                >
                                    <Icon
                                        icon='iconsystem_tips_line_3_circle-plus'
                                        size={18}
                                    />
                                    添加户口类型
                                </Button>
                            </>
                        ) : null}
                        {!fields.length ? (
                            <div className={styles.empty}>
                                <Empty
                                    image={Empty.NO_RELEASE}
                                    description={'暂无信息'}
                                />
                                <Button
                                    type='primary'
                                    onClick={() => add({ details: [{}] })}
                                >
                                    添加户口类型
                                </Button>
                            </div>
                        ) : null}
                    </>
                )}
            </Form.List>
            {contextHolder}
        </div>
    );