---
title: WKPickerSelector	选择器
group:
  title: 表单组件
  path: /form/
---

## 何时使用

WKPickerSelector 普通选择器组件，从底部弹起的滚动选择器。

## 基本使用

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

const options = [
  { label: '珠海', value: 1 },
  { label: '中山', value: 2 },
  { label: '北京', value: 3 },
  { label: '上海', value: 4 },
  { label: '河北', value: 5 },
  { label: '杭州', value: 6 },
  { label: '郑州', value: 7 },
  { label: '长沙', value: 8 },
  { label: '西藏', value: 9 },
  { label: '哈尔滨', value: 10 },
];

export default () => {
  const [val, setVal] = useState<string | number>();
  const handleChange = (evt: { detail: { value: string | number } }) => {
    evt.detail.value && setVal(evt.detail.value);
  };

  return (
    <PageWrapper title="基本使用">
      <WKPickerSelector
        style={{ width: '100%', padding: '4px 8px', cursor: 'pointer' }}
        options={options}
        placeholder="请选择地点"
        value={val}
        onChange={handleChange}
      ></WKPickerSelector>
    </PageWrapper>
  );
};
```

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