基于ant design form的二次封装

Posted 2022-02-11 zhuzeliang

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