---
title: 高级筛选
order: 3
docGenIncludes:
  - src/components/YwSearch/index.tsx
---

接入 YwFilter 组件 精确筛选

```jsx
import React, { useEffect, useState, Component } from 'react';
import ReactDOM from 'react-dom';
import { YwSearch } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
const items = [
  {
    title: '标题',
    name: 'input',
    component: 'Input',
    type: 'string',
    componentProps: {
      placeholder: '请输入任务标题',
    },
  },
  {
    title: '下拉数据',
    name: 'selectItem',
    component: 'Select',

    componentProps: {
      dataSource: [
        { name: 'AAA', code: 1 },
        { name: 'BBB', code: 2 },
      ],
      fieldNames: { label: 'name', value: 'code' }, // 默认 {label: 'label', value: 'value'}
    },
  },
  {
    title: '字典数据',
    name: 'dictItem',
    component: 'Select',

    componentProps: {
      dict: [
        { dictName: '待审核', dictValue: 1 },
        { dictName: '已审核', dictValue: 2 },
      ],
    },
  },
  {
    title: '发起人',
    name: 'person',
    component: 'Select',
    type: 'string',

    enum: [
      { value: 1, label: 1 },
      { value: 2, label: 2 },
    ],
    componentProps: {
      showSearch: true,
    },
  },
  {
    type: 'string',
    name: 'inputGroup',
    title: '',
    defaultValue: 'createTime',
    enum: [
      { value: 'orderTime', label: '下单时间' },
      { value: 'createTime', label: '创建时间' },
    ],

    required: true,
    component: 'InputGroup',
    children: [
      {
        type: 'array',
        title: '',
        name: '[startDate,endDate]',
        required: true,
        component: 'DateRangePicker',
        defaultValue: ['2022-07-09', '2022-07-23'],
        componentProps: {
          ranges: ['昨天', '今天', '7天', '30天'],
          allowClear: true,
        },
      },
    ],
  },
  {
    type: 'array',
    title: '完成时间',
    name: '[startDate1,endDate1]',
    component: 'DateRangePicker',
    defaultValue: ['2022-07-09', '2022-07-23'],

    componentProps: {
      ranges: ['昨天', '今天', '7天', '30天'],
    },
  },
  {
    type: 'array',
    title: '提交审核时间',
    name: '[startDate2,endDate2]',
    component: 'DateTimeRangePicker',
    defaultValue: ['2022-07-09', '2022-07-23'],
    props: {
      gridSpan: 2,
    },
  },
];

const App = () => {
  const [initialValues, setInitialValues] = useState({});
  const [filterProps, setFilterProps] = useState({});

  return (
    <div style={{ height: 600 }}>
      <YwSearch
        showFilter
        items={items}
        initialValues={initialValues}
        onValueChange={(keyword, values = {}) => {
          console.log(keyword, values);
          setFilterProps({ ...values, keyword });
        }}
        onSearch={(keyword) => {
          console.log(keyword);
          setFilterProps({ keyword });
        }}
      />
    </div>
  );
};

ReactDOM.render(<App />, mountNode);
```