antd outofdate 表单_Antd Upload 和 Antd Form 结合的踩坑记录

今天弄了半天这个上传组件结合表单组件的问题。

这个上传文件列表，如果是当前正在修改或者上传成功，当然是可以正常工作的，但是想要增加一个功能：

下次打开 Modal 时，表单字段中的上传文件字段，可以默认回显文件列表(该列表是 Upload 组件内部实现的)。

由于该 Upload 组件已经使用 Form 组件统一代理，所以需要通过 initialValue 字段进行初始值的设定(如果有的话)。当然也可以不代理，单独处理，但这样最终提交数据还是要再增加上去，而且还需要自行实现必填项的校验。

此时既要照顾到 Upload 自身所需字段(特别是 uid 字段)，又要迎合最终向后端提交附件时方便新老文件统一处理(通过 JSON.stringify() 的第二个过滤器参数进行处理)。

import React from 'react';

import {

message,

Modal,

Row,

Col,

Form,

Select,

Button,

Input,

Spin,

Radio,

DatePicker,

Upload,

Icon

} from 'antd';

import moment from 'moment';

const FormItem = Form.Item;

const Option = Select.Option;

const TextArea = Input.TextArea;

class MakeBill extends React.Component {

state = {

loading: false,

disabledOk: false,

confirmLoading: false,

fileList: [],

}

handleSubmit = () => {

this.props.form.validateFieldsAndScroll((err, values) => {

if (!err) {

this.setState({ loading: true, confirm