antd form使用demo

antd对表单进行了封装，
通过getFieldDecorator可实现表单数据双向绑定

使用步骤：
1、let { getFieldDecorator } = this.props.form;
2、对Form.Item进行了封装，getFieldDecorator(‘xx’,{rules:[],initialValue:’’})()

<Form.Item {...props}>
  {getFieldDecorator('xx',{rules:[],initialValue:''})(<Input/>)}
</Form.Item>

3、使用 Form.create()创建

FilterForm = Form.create()(FilterForm);

4、引用时，通过wrappedComponentRef 可以获取form数据
处理方法中：

 let queryInfo = this.filterForm.props.form.getFieldsValue();

组件引用：

   <FilterForm handleSubmit={this.handleQuery}
         wrappedComponentRef={(inst) => { this.filterForm = inst; }} />

完整form组件

  class FilterForm extends React.Component {
        render() {
            let { getFieldDecorator } = this.props.form;
            return (
                <Form layout="inline">
                    <Form.Item label="城市">
                        {getFieldDecorator('city_id', {
                            initialValue: "0"
                        })(
                            <Select
                                style={{ width: 100 }}
                                placeholder="全部"
                            >
                                <Option value="0">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">深圳市</Option>
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item >
                        {getFieldDecorator('range_time')(
                            <RangePicker
                                showTime={{ format: 'HH:mm:ss' }}
                                format="YYYY-MM-DD HH:mm:ss"
                                placeholder={['开始时间', '结束时间']}
                            />
                        )}
                    </Form.Item>
    
                    <Form.Item label="订单状态">
                        {getFieldDecorator('order_status', {
                            initialValue: "0"
                        })(
                            <Select
                                style={{ width: 100 }}
                                placeholder="全部"
                            >
                                <Option value="0">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">深圳市</Option>
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" style={{ marginRight: 10 }} onClick={this.props.handleSubmit}>查询</Button>
                        <Button onClick={() => { this.props.form.resetFields() }}>重置</Button>
                    </Form.Item>
                </Form>
            );
        }
    }
    FilterForm = Form.create()(FilterForm);