cjd-parkball/src/components/filter/demo/normal.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

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