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

本文主要是介绍【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}><Formform={form}onValuesChange={onValuesChange}layout='vertical'><Form.Itemhiddenname='schemeId'></Form.Item><BasicInfoform={form}data={data}/><ApplyScope form={form} /><WelfareInfoform={form}data={data}/><div className={styles.footer}><ButtonclassName={styles.confirm}onClick={onSubmit}type='primary'style={{ marginRight: 8 }}htmlType='submit'>确定</Button><ButtonclassName={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.Itemname={['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();}})]}><AmountInputNumbermin={0}placeholder={intl.formatMessage({ id: 'LMID_00003499' })}/></Form.Item>)
},
]...
<Form.Item name={'tableKey'}><VVTableborderedcolumns={columns}loading={loading}dataSource={dataSource}// pagination={{ innerPagination: true }}stickyscroll={{ 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 (// 这是一个折叠面板，包含头部和内容区<WelfareCollapseitems={[{key: '1',label: (<AccountTypeform={form}field={field}/>),children: (<WelfareTableform={form}field={field}><Buttontype='default'blockonClick={onRemove}disabled={fields.length <= 1}>删除</Button></WelfareTable>)}]}></WelfareCollapse>);})}<ButtonclassName={styles.addAccountType}type='link'onClick={() => add({ details: [{}] })}><Iconicon='iconsystem_tips_line_3_circle-plus'size={18}/>添加户口类型</Button></>) : null}{!fields.length ? (<div className={styles.empty}><Emptyimage={Empty.NO_RELEASE}description={'暂无信息'}/><Buttontype='primary'onClick={() => add({ details: [{}] })}>添加户口类型</Button></div>) : null}</>)}</Form.List>{contextHolder}</div>);