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);