antd 自定义 Form 表单控件

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

为了复用代码等我们有时会自定义一些 form 表单控件，像 Upload 文件上传组件通常会包一层把上传文件处理请求的逻辑包进去。

用 getFieldDecorator 方法包裹的表单控件会自动添加 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 (
      <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='相关文件'>
    {getFieldDecorator('attachments')(
      <FileUpload />
    )}
</Form.Item>