antd 사용자 정의Form 양식 컨트롤

공식 데모https://ant.design/components/form-cn/#components-form-demo-customized-form-controls
코드를 복용하기 위해서, Upload 파일 업로드 구성 요소와 같이 업로드 파일 처리 요청의 논리를 패키지로 구성하는 form 폼 컨트롤을 사용자 정의할 때가 있습니다.
getField Decorator 방법으로 감싸는 폼 컨트롤은value(또는valuePropName에서 지정한 속성 이름)와 onChange(또는trigger에서 지정한 속성 이름) 속성을 자동으로 추가하고value는form에서 전송된 값을 수신하며,onChange는 컨트롤의 값을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          
    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') {
      //                onChange          form
      let {onChange} = this.props;
      if (onChange) {
        let formValue = this.fileListToForm(fileList);
        onChange(formValue);
      }
    }
  };

  //                   
  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;
  }

  //             
  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 (
      

        
          
                 
          
        
      
    );
  }
}

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

기본 컨트롤처럼 사용

    {getFieldDecorator('attachments')(
      
    )}