---
title: 过滤的基本用法
title_en: normal usage for filter component
category: 2
---
展示了一个过滤组件的基本用法

```jsx
import { DatePicker, Select } 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) => {
    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
  }

  render() {
    return (
      <Filter store={false} onSubmit={this.onSubmit.bind(this)}>
        <FilterItem label="名称" name="name" defaultValue={getQuerys('name')}><Input placeholder="请输入名称" /></FilterItem>
        <FilterItem label="商家名称" name="supplierName" defaultValue={getQuerys('supplierName')}>
          <Select placeholder="请选择">
            <Option key={1} value={1}>采购商</Option>
          </Select>
        </FilterItem>
      </Filter>
    )
  }
}

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