import React, {Component} from 'react'
|
import { Form, Row, Col, Input, Button } from 'antd'
|
import './index.scss'
|
|
class AdvancedSearchForm extends React.Component {
|
state = {
|
|
}
|
|
getFields() {
|
const { getFieldDecorator } = this.props.form
|
const children = []
|
for (let i = 0; i < 10; i++) {
|
children.push(
|
<Col span={6} key={i}>
|
<Form.Item label={`菜单名称开始`}>
|
{getFieldDecorator(`field-${i}`)(<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()
|
}
|
|
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">
|
搜索
|
</Button>
|
<Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
|
重置
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm)
|
|
export default class NormalTable extends Component {
|
render() {
|
return (
|
<div>
|
<WrappedAdvancedSearchForm />
|
<div className="search-result-list">Search Result List</div>
|
</div>
|
)
|
}
|
}
|