// standardForm.js import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { Form, Input, Row, Col, Button } from 'antd'; the FormItem const = Form.Item; // default layout Export defaultLabelColSpan = const. 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 }, }; // monitor changes in form const handleFormChange = (The props, changedValues, allValues) => { IF (props.onChange) { props.onChange(allValues); } }; class StandardForm extends PureComponent { // Render single table item 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, // complex forms check the rules: the rules || [{required, Message: `$ {} label can not be empty '}], })(component || <Input />)} </FormItem> </Col> ); }; onSubmit = e => { e.preventDefault(); const { onSubmit } = this.props; if (onSubmit) { onSubmit(); } }; render() { // items formatted as configured above item table const {the onSubmit, items, layout, Columns, form} = the this .props; return ( <= {Form1 the onSubmit the onSubmit && the 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' }}> search for </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} />