Android实现Ant Design 自定义表单组件

Ant Design 组件提供了Input，InputNumber，Radio，Select，uplod等表单组件，但实际开发中这是不能满足需求，同时我们希望可以继续使用FORM提供的验证和提示等方法（使用起来确实很爽），这时需要自己动手封装一些表单，同时我们还要保持方法可以继续是使用。

　　组件的源码    https://GitHub.com/haozhaohang/ant-design-expand-component

　　下面看一下如何自己封装表单组件，这是一个最基础的表单使用例子:

import React, { PureComponent } from 'react'import { Button, Form, Input, Radio } from 'antd'import FormItem from 'components/FormItem'const RadioGroup = Radio.Groupconst options = [  { label: '男', value: 1 },  { label: '女', value: 2 },]class Test extends PureComponent {  handleSubmit = (e) => {    e.preventDefault();    const { form: { validateFields } } = this.props;    validateFields((errors, values) => {      if (errors) {        return;      }      console.log(values)    })  }  render() {    const { form: { getFieldDecorator } } = this.props    const nameDecorator = getFieldDecorator('name')    const sexDecorator = getFieldDecorator('sex')    return (      <section>        <Form layout="horizontal" onSubmit={this.handleSubmit}>          <FormItem label="姓名">            {nameDecorator(<Input />)}          </FormItem>          <FormItem label="年龄">            {sexDecorator(<RadioGroup options={options} />)}          </FormItem>          <FormItem buttonsContainer>            <Button type="primary" size="default" htmlType="submit">提交</Button>          </FormItem>        </Form>      </section>    );  }}export default Form.create()(Test)