官方 Demo https://ant.design/components/form-cn/#components-form-demo-customized-form-controls

為了復用代碼等我們有時會自定義一些 form 表單控件，像 Upload 文件上傳組件通常會包一層把上傳文件處理請求的邏輯包進去。

用 getFieldDecorator 方法包裹的表單控件會自動添加 value (或由 valuePropName 指定的屬性名) 和 onChange （或由 trigger 指定的屬性名）屬性， value 接收 form 傳入的值， onChange 將控件的值回調(diào)到 form 中。 這兩個屬性是自動添加的，所以自定義控件不能有這兩個屬性。

我自己包裝了一下 Upload 組件，僅共參考

import React from 'react';
import {Upload, Icon, Button} from 'antd';
import PropTypes from 'prop-types';

export default class FileUpload extends React.Component {
  constructor(props) {
    super(props);
    let fileList = [];
    if (props.value && props.value.length > 0) {
      fileList = this.propToFileList(props.value)
    }
    this.state = {
      fileList: fileList
    };
  }

  componentWillReceiveProps(nextProps) {
    let equals = this.equals(nextProps.value, this.state.fileList);

    // 接收form 傳入的 value 轉(zhuǎn)換為內(nèi)部數(shù)據(jù)結(jié)構(gòu)
    if ('value' in nextProps && !equals) {
      this.setState({
        fileList: this.propToFileList(nextProps.value)
      });
    }
  }

  equals(value, fileList) {
    const fileListValue = this.fileListToForm(fileList);

    if ((value === '' || value === undefined) && fileListValue.length == 0) {
      return true;
    }

    if (Array.isArray(value) && Array.isArray(fileListValue) && value.length === fileListValue.length) {
      for (let index of value.keys()) {
        let first = value[index];
        let second = fileListValue[index];
        if ((first.filename !== second.filename) || (first.publicKey !== second.publicKey)) {
          return false;
        }
      }

      return true;
    }

    return false;
  }

  handleChange = (info) => {
    let fileList = info.fileList;
    fileList = fileList.map((file) => {
      if (file.response) {
        let publickey = file.response.publicKey;
        if (publickey) {
          file.url = `/api/attachments/${publickey}`;
        }
      }
      return file;
    });

    this.setState({fileList});

    if (info.file.status === 'done' || info.file.status === 'removed') {
      // 內(nèi)部狀態(tài)的變化通過自動添加的 onChange 方法通知到外部的 form
      let {onChange} = this.props;
      if (onChange) {
        let formValue = this.fileListToForm(fileList);
        onChange(formValue);
      }
    }
  };

  // 內(nèi)部數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為表單需要的數(shù)據(jù)結(jié)構(gòu)
  fileListToForm(fileList) {
    let formValue = [];
    fileList.forEach(item => {
      if (item.status === 'done') {
        let publicKey = item.url.slice(item.url.lastIndexOf('/') + 1);
        formValue.push({
          filename: item.name,
          publicKey
        });
      }
    });
    return formValue;
  }

  // 表單值轉(zhuǎn)換為內(nèi)部數(shù)據(jù)結(jié)構(gòu)
  propToFileList(value) {
    const fileList = [];
    if (value && Array.isArray(value)) {
      value.forEach((item, index) => {
        fileList.push({
          uid: index,
          name: item.filename,
          status: 'done',
          url: `/api/attachments/${item.publicKey}`
        });
      });
    }

    return fileList;
  }

  render() {
    let multiple = true;
    if (this.props.multiple === false) {
      multiple = false;
    }
    const props = {
      action: '/api/attachments',
      onChange: this.handleChange,
      multiple: multiple,
    };

    return (
      <div>
        <Upload {...props} fileList={this.state.fileList}>
          <Button>
            <Icon type="upload"/> 上傳文件
          </Button>
        </Upload>
      </div>
    );
  }
}

FileUpload.propTypes = {
  value: PropTypes.any,
  onChange: PropTypes.func,
  multiple: PropTypes.bool
};

像原生控件一樣使用

<Form.Item {...formItemLayout} label='相關(guān)文件'>
    {getFieldDecorator('attachments')(
      <FileUpload />
    )}
</Form.Item>