---
title: WKSearchBar 搜索框
group:
  title: 表单组件
  path: /form/
---

## 何时使用

搜索框，响应用户搜索行为，触发相应的业务逻辑。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import { WKSearchBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState('');
  return (
    <PageWrapper title="基本使用">
      <WKSearchBar value={value} onChange={setValue} />
    </PageWrapper>
  );
};
```

## 文字对齐方式

```tsx
/**
 * title: 文字对齐方式
 * desc: 三种对齐方式，通过设置align为left center right分别实现文字左对齐、居中对齐和右对齐。若不设置，默认为左/left对齐
 */
import React, { useState } from 'react';
import { WKSearchBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState('');

  return (
    <PageWrapper title="文字对齐方式">
      <WKSearchBar align="left" value={value} onChange={setValue} />
      <WKSearchBar align="center" value={value} onChange={setValue} />
      <WKSearchBar align="right" value={value} onChange={setValue} />
    </PageWrapper>
  );
};
```

## 清空按钮设置

```tsx
/**
 * title: 清空按钮设置
 * desc: 取消清空按钮，不设置默认显示
 */
import React, { useState } from 'react';
import { WKSearchBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState('');

  return (
    <PageWrapper title="清空按钮设置">
      <WKSearchBar clearable={false} value={value} onChange={setValue} />
    </PageWrapper>
  );
};
```

## 触发清空按钮事件

```tsx
/**
 * title: 触发清空按钮事件
 * desc: 当触发清空按钮时触发自定义清空事件
 */
import React, { useState } from 'react';
import { WKSearchBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState('');

  /**
   * 触发清空事件
   */
  const handleClear = () => {
    console.log('清空中...');
  };

  return (
    <PageWrapper title="触发清空按钮事件">
      <WKSearchBar onClear={handleClear} value={value} onChange={setValue} />
    </PageWrapper>
  );
};
```

## 监听事件支持防抖

```tsx
/**
 * title: 监听事件支持防抖
 * desc: debounceTime设置防抖时间,不设置默认为1000ms
 */
import React, { useState } from 'react';
import { WKSearchBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState('');
  /**
   * 触发输入事件
   */
  const handleSearch = () => {
    console.log('输入中...');
  };
  return (
    <PageWrapper title="监听事件支持防抖">
      <WKSearchBar onSearch={handleSearch} debounceTime={2000} value={value} onChange={setValue} />
    </PageWrapper>
  );
};
```

## 自定义搜索图标

```tsx
/**
 * title: 自定义搜索图标
 * desc: 可自定义搜索图标
 */
import React, { useState } from 'react';
import { View, WKSearchBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState('');
  /**
   * 自定义图标
   */
  const CusIcon = <View style={{ display: 'inline', verticalAlign: 'middle' }}>+</View>;

  return (
    <PageWrapper title="自定义搜索图标">
      <WKSearchBar searchIcon={CusIcon} value={value} onChange={setValue} />
    </PageWrapper>
  );
};
```

## 自定义搜索框前后内容

```tsx
/**
 * title: 自定义搜索图标
 * desc: 可自定义搜索图标
 */
import React, { useState } from 'react';
import { View, WKSearchBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState('');
  /**
   * 自定义前后插槽
   */
  const before = <View style={{ marginRight: 10, color: 'rgba(136, 147, 166, 1)' }}>地址</View>;
  const after = <View style={{ marginLeft: 10, color: 'rgba(136, 147, 166, 1)' }}>取消</View>;

  return (
    <PageWrapper title="自定义搜索框前后内容">
      <WKSearchBar before={before} value={value} onChange={setValue} />
      <WKSearchBar after={after} value={value} onChange={setValue} />
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKSearchBar/index.d.ts' ></API>
