---
title: 过滤的基本用法1
title_en: normal usage for filter component
category: 2
---
展示了一个过滤组件的基本用法
```jsx
import { DatePicker, Select, Icon, Button } from 'parkball'
import moment from 'moment'
import { Filter, Input } from 'parkball'
import { getQuerys } from '../../utilities'

const { RangePicker } = DatePicker
const { Option } = Select
const FilterItem = Filter.Item

class Demo extends React.Component {
  onSubmit = (values) => {
    console.log(values)
    let params = values
    if (params && params.date) {
      params.startAt = params.date[0].format('YYYY-MM-DD')
      params.endAt = params.date[1].format('YYYY-MM-DD')
      params.date = undefined
    }
    return params
  }

  onExport (form) {
    form.validateFields((err, values) => {
      console.log(values)
    })
  }

  render() {
    return (
      <Filter
        onSubmit={this.onSubmit.bind(this)}
        operation={(form) => (<Button icon="download" onClick={() => this.onExport(form)} />)}
      >
        <FilterItem
          label="名称"
          name="name"
          defaultValue={getQuerys('name')}>
          <Input placeholder="请输入名称" />
        </FilterItem>
        <FilterItem
          className="test-item"
          label="客户类型"
          name="type"
          defaultValue={getQuerys('type')}>
          <Select placeholder="请选择">
            <Option key={1} value={1}>采购商</Option>
          </Select>
        </FilterItem>
        <FilterItem label="起始日期" name="startDate">
          <DatePicker placeholder={'请选择'}/>
        </FilterItem>
        <FilterItem label="结束日期" name="endDate">
          <DatePicker placeholder={'请选择'}/>
        </FilterItem>
        <FilterItem label="编码" name="id" defaultValue={getQuerys('id')} required>
          <Input placeholder="请输入编码" />
        </FilterItem>
        <FilterItem label="商家名称" name="supplierName" defaultValue={getQuerys('supplierName')}>
          <Select placeholder="请选择">
            <Option key={1} value={1}>采购商</Option>
          </Select>
        </FilterItem>

        <FilterItem label="编码" name="id" defaultValue={getQuerys('id')} required>
          <Input placeholder="请输入编码" />
        </FilterItem>
        <FilterItem label="商家名称" name="purchaserName" defaultValue={getQuerys('purchaserName')}>
          <Select placeholder="请选择">
            <Option key={1} value={1}>采购商</Option>
          </Select>
        </FilterItem>
        <FilterItem label="编码" name="id" defaultValue={getQuerys('id')} required>
          <Input placeholder="请输入编码" />
        </FilterItem>
      </Filter>
    )
  }
}

ReactDOM.render(
  <Demo/>,
  mountNode
)
```