FormGroup antd3

参考资料 antd-from https://3x.ant.design/components/form-cn
formily https://github.com/alibaba/formily/blob/master/README.zh-cn.md
formily schema https://zhuanlan.zhihu.com/uform

form的用法

import { Form, Row, Col, Input, Button, Icon } from 'antd';
class AdvancedSearchForm extends React.Component {
  state = {
    expand: false,
  };
  // To generate mock Form.Item
  getFields() {
    const count = this.state.expand ? 10 : 6;
    const { getFieldDecorator } = this.props.form;
    const children = [];
    for (let i = 0; i < 10; i++) {
      children.push(
        <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
          <Form.Item label={`Field ${i}`}>
            {getFieldDecorator(`field-${i}`, {
              rules: [
                {
                  required: true,
                  message: 'Input something!',
                },
              ],
            })(<Input placeholder="placeholder" />)}
          </Form.Item>
        </Col>,
      );
    }
    return children;
  }
  handleSearch = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      console.log('Received values of form: ', values);
    });
  };
  handleReset = () => {
    this.props.form.resetFields();
  };
  toggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };
  render() {
    return (
      <Form className="ant-advanced-search-form" onSubmit={this.handleSearch}>
        <Row gutter={24}>{this.getFields()}</Row>
        <Row>
          <Col span={24} style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit">
              Search
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              Clear
            </Button>
            <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
              Collapse <Icon type={this.state.expand ? 'up' : 'down'} />
            </a>
          </Col>
        </Row>
      </Form>
    );
  }
}
const WrappedAdvancedSearchForm = Form.create({ name: 'advanced_search' })(AdvancedSearchForm);
ReactDOM.render(
  <div>
    <WrappedAdvancedSearchForm />
    <div className="search-result-list">Search Result List</div>
  </div>,
  mountNode,
);

form.css

.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}
.ant-advanced-search-form .ant-form-item {
  display: flex;
}
.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

FormItem

1. 面向数据编程，根据数据渲染form表单
2. 描述表单结构的schema语言，快速生成表单

import React, { isValidElement } from 'react';
const COMPONENT = {};
function FormConfig({ component, valuePropName, ...props }) {
  // 传入的是 React组件 <Select />
  if (typeof component === 'object' && isValidElement(component)) {
    return component;
  }
  const Component = typeof component === 'function' ? component : COMPONENT[component];
  if (!Component) return null;
  return <Component {...props} />;
}
export default FormConfig;

dataSource数据格式

数组对象格式

export const jobArray = [
  { label: 'UI设计', value: '1' },
  { label: '前端开发', value: '2' },
  { label: '后端开发', value: '3' },
]
export default [
  {
    component: 'Input',
    name: 'username',
    label: '用户名',
    initialValue: '',
    placeholder: '请输入用户名',
    rules: [
      {
        required: true,
        message: '请输入用户名',
      },
    ],
    onChange: ev => onChange({ key: 'username', value: ev.target.value }),
  },
  {
    component: 'Password',
    name: 'password',
    label: '密码',
    initialValue: '',
    placeholder: '请输入密码',
    rules: [
      {
        required: true,
        message: '请输入密码',
      },
    ],
    onChange: ev => onChange({ key: 'password', value: ev.target.value }),
  },
  {
    component: 'Select',
    name: 'job',
    label: '工作',
    initialValue: '',
    placeholder: '请选择工作',
    children: {
      component: 'Option',
      data: jobArray,
    },
    rules: [
      {
        required: true,
        message: '请选择工作',
      },
    ],
    onChange: value => onChange({ key: 'job', value }),
  },
  {
    component: 'AutoComplete',
    name: 'skill',
    label: '技能',
    placeholder: '请输入技能',
    initialValue: '',
    dataSource: [],
    filterOption: (input, option) => {
      const text = option.props.children.toUpperCase()
      return text.indexOf(input) >= 0
    },
    rules: [
      {
        required: true,
        message: '请输入技能' 
      },
    ],
    onChange: value => onChange({ key: 'skill', value }),
  },
  {
    component: 'Switch',
    name: 'mg',
    label: '特效专业',
    initialValue: true,
    valuePropName: 'checked',
    checkedChildren: '是',
    unCheckedChildren: '否',
    onChange: value => onChange({ key: 'effective', value }),
  },
]