基于ant design form的二次封装

// standardForm.js
import React, { PureComponent } from ‘react‘;
import PropTypes from ‘prop-types‘;
import { Form, Input, Row, Col, Button } from ‘antd‘;

const FormItem = Form.Item;
// 默认的layout
export const defaultLabelColSpan = 8;
const defaultFormItemLayout = {
  labelCol: { span: defaultLabelColSpan },
  wrapperCol: { span: 16 },
};

const responsive = {
  1: { xs: 24 },
  2: { xs: 24, sm: 12 },
  3: { xs: 24, sm: 12, md: 8 },
  4: { xs: 24, sm: 12, md: 6 },
};

// 监听表单变化
const handleFormChange = (props, changedValues, allValues) => {
  if (props.onChange) {
    props.onChange(allValues);
  }
};
class StandardForm extends PureComponent {
  // 渲染单个表单项
  renderFormItem = ({ item, layout, form, columns }) => {
    const { label, key, required, component, options = {}, rules, extra } = item;
    const col = columns > 4 ? 4 : columns;
    return (
      <Col {...responsive[col]} key={key}>
        <FormItem key={key} label={label} {...layout} extra={extra}>
          {form.getFieldDecorator(key, {
            normalize: val => (typeof val === ‘string‘ ? val.trim() : val),
            ...options,
            form, // 处理复杂的表单校验
            rules: rules || [{ required, message: `${label}不能为空` }],
          })(component || <Input />)}
        </FormItem>
      </Col>
    );
  };

  onSubmit = e => {
    e.preventDefault();
    const { onSubmit } = this.props;
    if (onSubmit) {
      onSubmit();
    }
  };

  render() {
    // items格式即为上文配置的表单项
    const { onSubmit, items, layout, columns, form } = this.props;
    return (
      <Form onSubmit={onSubmit && this.onSubmit}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }} type="flex" align="top">
          {items.map(item => this.renderFormItem({ item, layout, form, columns }))}
        </Row>
        <Button type="primary" htmlType="submit" style={{ display: ‘none‘ }}>
          搜索
        </Button>
      </Form>
    );
  }
}

// colums [1,2,3,4]
StandardForm.propTypes = {
  items: PropTypes.array.isRequired,
  layout: PropTypes.object,
  columns: PropTypes.number,
  form: PropTypes.object.isRequired,
};

StandardForm.defaultProps = {
  layout: defaultFormItemLayout,
  columns: 1,
};

export default Form.create({ onValuesChange: handleFormChange })(StandardForm);

<StandardForm
            ref={formRef => {
              this.formRef = formRef;
            }}
            items={formConfig}
            layout={{
              labelCol: { span: 7 },
              wrapperCol: { span: 17 },
            }}
            columns={3}
          />